Question

我有一个非常简单的HTML表格。我只想使用一列。我的表格单元格中的“名称”一词应该是垂直居中的，但是当我添加带有数字和换行符的div时，文本“名称”不再是垂直居中的。

我怎样才能让垂直对齐再次工作？

我正在寻找没有JavaScript / jQuery的跨浏览器解决方案。

<table style="width: 100px">
  <tr>
    <td style="width: 100px; vertical-align: middle">Name<div style="float: right">1<br />2<br />3</div>
    </td>
  </tr>
</table>

Answer 1

不要使用float，而是使用display。 inline-block元素可以与baseline

垂直对齐

<table style="width: 100px">
  <tr>
    <td style="width: 100px; vertical-align: middle">Name<div style="display:inline-block;vertical-align:middle;">1<br />2<br />3</div>
    </td>
  </tr>
</table>

猜测你的评论

td {
  width: 100px;
  vertical-align: middle
}

td>div {
  display: inline-block;
  vertical-align: middle;
}
table {
background:linear-gradient(0deg, transparent 50%, rgba(0,0,0,0.2) 50%),linear-gradient(90deg, transparent 50%, rgba(0,0,0,0.2) 50%)

<table style="width: 400px">
  <tr>
    <td>Name
      <div>1<br />2<br />3</div>
    </td>
    <td>Name
      <div>1<br />2033</div>
    </td>
  </tr>
</table>

我将如何做到这一点：

  td,
th {
  vertical-align: middle
}

table {
  background: linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%)

<table style="width: 400px">
  <tr>
    <th>Name</th>
    <td>1<br />2<br />3
    </td>
    <th>Name</th>
    <td>1<br />2033
    </td>
  </tr>
</table>

Answer 2

我使用flexbox更改了CSS样式。这是你需要的吗？

<table style="width: 100px">
  <tr>
    <td style="display:flex; align-items: center">Name<div>1<br />2<br />3</div>
    </td>
  </tr>
</table>

当里面有div时，HTML表格单元格垂直对齐

2 个答案: