复选框垂直对齐中间在 td 中不起作用答案

【问题标题】：chekbox vertical-align middle not working in td复选框垂直对齐中间在 td 中不起作用
【发布时间】：2016-04-19 06:46:10
【问题描述】：

我想要复选框垂直对齐中间，其他元素垂直对齐顶部，但它不起作用。我尝试使用 height:100%，它在 chrome 中运行良好，但在 IE 中运行良好。

html:

  <td class="cart_info_td">
      <input type="checkbox" class="cart_info-check">
      <a href="#"><img src="images/dynamic/product.jpg" class="cart_info-pic"></a>
      <a href="#">product's title</a>
  </td>

css:

.cart_info-check {
    vertical-align: middle;
    //height: 100%;
    margin-left: 10px;
    margin-right: 10px;
 }

【问题讨论】：

vertical-align 属性适用于容器元素，在本例中为 td.它描述了如何对齐容器内的元素。 cart_info_td 的 CSS 是什么？
表使用table-layout:fixed; .cart_info_td { vertical-align:top; width: 400px; text-align: left; }
所以td 中的所有元素都将具有vertical-align: top

标签： html css internet-explorer cross-browser

【解决方案1】：

你可以使用这样的东西

td {
    text-align: center; 
    vertical-align: top;
}

.cart_info-check {
    text-align: center; 
    vertical-align: middle;
}

<table>
  <tr>
    <td class="cart_info-check">
      <input type="checkbox">
    </td>
    <td>
      <a href="#"><img src="images/dynamic/product.jpg" class="cart_info-pic"></a>
    </td>
    <td>
      <a href="#">product's title</a>
    </td>
  </tr>
</table>

希望对你有帮助

【讨论】：