html - 如何将复选框和跨度与文本和谷歌 API 符号对齐？

Question

我有一个包含四个单元格的表格。每个单元格都有输入字段和带图标的文本。我想将所有三个元素垂直对齐在同一高度。这是我的代码示例:

.tbl-checks {
  width: 300px;
  border-collapse: collapse;
}
table, td, th {
  border: 1px solid black;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table class="tbl-checks">
  <theaed>
    <tr>
      <th>Title</th>
    </tr>
  </theaed>
  <tbody>
    <tr>
      <td>Description</td>
    </tr>
      <tr>
        <td>
          <input type="checkbox" name="check1" id="check1" value="1" />
          <span class="checks"><i class="material-icons" style="color:##ffc107">warning</i> Text 1</span>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check2" id="check2" value="2" />
          <span class="checks"><i class="material-icons" style="color:##ffc107">warning</i> Text 2</span>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check3" id="check3" value="3" />
          <span class="data-checks"><i class="material-icons" style="color:##ffc107">warning</i> Text 3</span>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check4" id="check4" value="4" />
          <span class="data-checks"><i class="material-icons" style="color:##ffc107">warning</i> Text 4</span>
        </td>
      </tr>
  </tbody>
</table>

正如您在我的示例中所见，符号、文本和复选框未对齐。有没有办法通过 CSS 使它们处于相同的垂直高度？

Answer 1

通过将 align-items 设置为居中来添加 flex 显示和居中元素

td, td>span{
  display: flex;
  align-items: center;
}

.tbl-checks {
  width: 300px;
  border-collapse: collapse;
}
table, td, th {
  border: 1px solid black;
}

td, td>span{
  display: flex;
  align-items: center;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table class="tbl-checks">
  <theaed>
    <tr>
      <th>Title</th>
    </tr>
  </theaed>
  <tbody>
    <tr>
      <td>Description</td>
    </tr>
      <tr>
        <td>
          <input type="checkbox" name="check1" id="check1" value="1" />
          <span class="checks"><i class="material-icons" style="color:##ffc107">warning</i> Text 1</span>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check2" id="check2" value="2" />
          <span class="checks"><i class="material-icons" style="color:##ffc107">warning</i> Text 2</span>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check3" id="check3" value="3" />
          <span class="data-checks"><i class="material-icons" style="color:##ffc107">warning</i> Text 3</span>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check4" id="check4" value="4" />
          <span class="data-checks"><i class="material-icons" style="color:##ffc107">warning</i> Text 4</span>
        </td>
      </tr>
  </tbody>
</table>