对齐开关、形状和文本答案

【问题标题】：Aligning Switch, Shape and Text对齐开关、形状和文本
【发布时间】：2021-03-09 11:22:15
【问题描述】：

我正在尝试像这张图片一样对齐这个开关、形状和文本。但我是 HTML 新手，无法对齐它们。你能告诉我这里要改变什么吗？我想在 CSS 文件中进行更改。我试过vertical-align、justify-content、align-items。还是没有运气。

应该是这样的：

这是我的 HTML 代码：

<div>

<p style="line-height: 10px;">OpTon</p>
<p-dropdown editable="true"></p-dropdown>
</div>

<div>
    <div class="filterColumnItems">
        <p-inputSwitch [(ngModel)]="checked1"></p-inputSwitch> 
        <div style="height: 10px;width: 10px; background-color: #dd0c29; border-radius: 50%; display: table-cell;"></div>
        <p>Tor Ton</p>
    </div>
</div>

<div>
    <div class="filterColumnItems">
        <p-inputSwitch [(ngModel)]="checked2"></p-inputSwitch> 
        <div style="height: 10px;width: 10px; background-color: #e8bf29; border-radius: 7px"></div>
        <p>Tor Ton Ton</p>
    </div>
</div>

<div>
    <div class="filterColumnItems">
        <p-inputSwitch [(ngModel)]="checked3"></p-inputSwitch> 
        <div style="height: 10px;width: 10px; background-color: #30ab5b; border-radius: 7px"></div>
        <p>Tor Ton Ton Ton</p>
    </div>
</div>

<div>
    <div class="filterColumnItems">
        <p-inputSwitch [(ngModel)]="checked4"></p-inputSwitch> 
        <div style="height: 10px;width: 10px; background-color: #30ab5b; border-radius: 7px"></div>
        <p>Tor Ton Ton Ton Ton</p>
    </div>
</div>

这是我的 CSS：

.filterColumnSection {
    padding: 20px;
    background-color: white;
    margin: 20px;
    margin-bottom: 0;
    border-radius: 3px;
    height: 607px;
    width: 282px;
    font-size: 14px;
    line-height: 40px;

    

    
    
}
.filterColumnItems {

  display: flex;
  justify-content: space-around;
align-items: center;






  }

:host ::ng-deep .p-dropdown {
    width: 238px;

  }

【问题讨论】：

标签： html css angular primeng

【解决方案1】：

你离你想要的并不远。如果您从 filterColumnItems 类中删除 justify-content 属性并为您的项目符号添加边距，应该没问题。

.filterColumnItems {
  display: flex;
  align-items: center;
}

.bullet {
  height: 10px;
  width: 10px;
  margin: 10px;
  border-radius: 50%;
}

见我的demo

【讨论】：