Question

td的默认css是什么使得内容自动垂直居中？

我知道如果将div设置为水平居中，假设div小于其父margin: 0 auto但是什么允许td自动垂直居中？

#outer {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

#inner {
  width: 60%;
  margin: auto;
  background-color: red;
}

<div id="outer">
  <div id="inner">
    centered only horizontally
  </div>
</div>

<table height=200 border=1>
  <tr>
    <td>
      I center automatically
    </td>
  </tr>
</table>

Answer 1

 vertical-align: inherited;

对于TD＆amp;用户代理样式表中的TR，即默认浏览器样式表。所以TD指的是TBODY的垂直对齐，如下所示，这使得它在中间垂直对齐。

vertical-align: middle;

要覆盖默认样式表，您可以执行类似

的操作

td{
 vertical-align: top !important ;
}

Answer 2

td元素的默认css为display: table-cell。此属性也将接受vertical-align。

因此，您可能需要设置css：

＆＃13;

td {
  vertical-align: middle;
}

.outer {
  display: table-cell;
  vertical-align: middle;
  width: 400px;
  height: 200px;
  border: 1px solid black;
}

.inner {
  width: 60%;
  margin: 0 auto;
  background-color: yellow;
  text-align: center;
}

＆＃13;

<table height="200" border="1">
  <tr>
    <td>I am vertically centered</td>
  </tr>
</table>

<div class="outer">
  <div class="inner">
    This is vertically centered
  </div>
</div>

＆＃13;

Answer 3

#outer{display:table-cell;}
#inner{vertical-align:middle;}

td的默认css，自动居中

3 个答案: