对齐开关、形状和文本

Question

我正在尝试像这张照片中那样对齐这个开关、形状和文本。但我是 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;

  }

Answer 1

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

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

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

看我的demo

对齐开关、形状和文本

Aligning Switch, Shape and Text

html

css

primeng

angular