如何实现复选框与两侧文本的对齐效果？

你的核心问题是全局给label设置了display: table-cell，导致复选框区域的label继承了这个属性，和你设置的flex布局冲突，同时复选框区域需要规整的列对齐结构。下面给你两种可行的修复方案：

方案一：CSS Grid布局（灵活易维护） #

修改你的CSS代码，重置复选框区域的label样式，用Grid实现三列对齐：

p {
  display: table-row;
}

label {
  display: table-cell;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
}

textarea {
  vertical-align: middle;
}

/* 重置复选框区域样式，改用Grid布局 */
.checkbox {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 15px;
  margin-top: 5px;
}

.checkbox > label {
  display: block; /* 取消全局table-cell继承 */
  padding: 5px 0;
  vertical-align: baseline;
}

/* 让复选框与文本垂直居中对齐 */
.checkbox input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 4px;
}

调整HTML结构，给后续条目添加空label占位，保证列对齐：

<p>
  <label for="förnamn"> * Förnamn: </label>
  <input id="förnamn" type="text">
</p>
<p>
  <label for="efternamn"> * Efternamn: </label>
  <input id="efternamn" type="text">
</p>
<p>
  <label for="adress"> * Adress: </label>
  <input id="adress" type="text">
</p>
<p>
  <label for="e-post"> * E-post: </label>
  <input id="e-post" type="text">
</p>
<p>
  <label for="ålder">Ålder: </label>
  <select name="ålder" id="Ålder">
    <option value="över_18">Över 18</option>
    <option value="under_18">Under 18</option>
  </select>
</p>
<p>
  <label for="meddelande">Meddelande: </label>
  <textarea name="meddelande" id="meddelande" cols="18" rows="2"></textarea>
</p>

<p>
  <label for="välj">Välj låtar och media: </label>
</p>
<div class="checkbox">
  <label>Ringnes-Ronny</label>
  <label><input type="checkbox">Polisen</label>
  <label>59 SEK</label>

  <label></label>
  <label><input type="checkbox">Valhalla</label>
  <label>39 SEK</label>

  <label></label>
  <label><input type="checkbox">Polisen</label>
  <label>49 SEK</label>

  <label></label>
  <label><input type="checkbox">Monster</label>
  <label>39 SEK</label>
</div>

方案二：延续Table布局（和表单风格统一） #

如果想保持和上面表单一致的table布局逻辑，可以这样修改：

p {
  display: table-row;
}

label {
  display: table-cell;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
}

textarea {
  vertical-align: middle;
}

/* 复选框区域用table布局 */
.checkbox {
  display: table;
  margin-top: 5px;
}

.checkbox .row {
  display: table-row;
}

.checkbox .cell {
  display: table-cell;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* 复选框与文本对齐 */
.checkbox input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 4px;
}

对应的HTML结构调整：

<!-- 上面的表单代码不变 -->

<p>
  <label for="välj">Välj låtar och media: </label>
</p>
<div class="checkbox">
  <div class="row">
    <div class="cell">Ringnes-Ronny</div>
    <div class="cell"><label><input type="checkbox">Polisen</label></div>
    <div class="cell">59 SEK</div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"><label><input type="checkbox">Valhalla</label></div>
    <div class="cell">39 SEK</div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"><label><input type="checkbox">Polisen</label></div>
    <div class="cell">49 SEK</div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"><label><input type="checkbox">Monster</label></div>
    <div class="cell">39 SEK</div>
  </div>
</div>

这两种方案都能让复选框和文本垂直居中，同时实现规整的列对齐效果，你可以根据自己的习惯选择。

内容的提问来源于stack exchange，提问作者user15227357