Question

我有一个<li>元素，其显示属性设置为相对定位的div内的table-cell。

它需要是一个表格单元格，因为我想使用vertical-align: middle属性。现在的问题是以细胞本身为中心，而不是其内容。

这是来源：

<ul>
<div id="outer">
<li>Hello</li>
</div>
</ul>

CSS：

ul { padding-left: 0;}
#outer {
    width: 200px;
    text-align: centre; /* this centred the text in the cell rather than the cell*/
}
#outer li {
    display: table-cell;
    vertical-align: middle;
    width: 150px;
    margin: 0 auto; /* absolutely no effect, same for 'margin: auto' */
}

请参阅jsfiddle。

我能让它发挥作用的唯一方法是将div'外部'缩小一个用padding-left补偿的量，以手动将单元格移动到中心，但这感觉就像是违反了所有的礼节。这样做的正确方法是什么？

Answer 1

无需使用table-cell垂直对齐li中的文字。您实际需要做的是将height和line-height设置为相同的内容。然后，您可以使用inline-block显示以获得居中。

#outer li {
    line-height: 40px;
    height: 40px;
    vertical-align: middle;
    width: 150px;
    margin: 0 auto;
    display: inline-block;
}

此外，您不应在div块内使用ul元素。如果需要，请将ID放在ul上。

<ul id="outer">
    <li>Hello</li>
</ul>

Answer 2

你应该把你的div放在里面而不是反过来

HTML：

<ul>
  <li>
    <div class="inner">
      Hello
    </div>
  </li>
</ul>

CSS：

li {
  width: 200px;
  height: 60px;
  border: 1px solid orange;
  text-align: center;
  list-style-type: none;

}

li .inner {
  width: 100px;
  height: 30px;
  border: 1px solid blue;
  margin: 0 auto;
}

JSFiddle

编辑：如果您想要垂直居中，则应在表格单元格中包含子div。表格单元格将忽略设置的宽度，并将根据表格的宽度折叠，因此将文本放在其中的块级元素中

HTML：

<ul>
  <li>
    <div class="inner">
      <div class="inner-text">
      Hello
      </div>
    </div>
  </li>
</ul>

CSS：

li {
  width: 200px;
  height: 60px;
  border: 1px solid orange;
  text-align: center;
  list-style-type: none;
  display:table;
}

li .inner {
  display: table-cell;
  vertical-align:middle;
}

li .inner-text {
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 1px solid blue;
  margin: 0 auto;
}

ul {
    padding-left: 0;
}

Updated JSFiddle

Answer 3

问题是该单元格被包装在一个匿名的块级表中。

该表不是相对于div居中的，因为块级别框忽略了父级text-align。

如果表是内联级别的，它将起作用。使用display: inline-table设置样式就足够了，但问题是您无法选择匿名元素。

如果div有display: inline，则匿名表将为内联级别，但这会破坏您的布局。

你应该做的是摆脱桌子并使用flexbox：

ul {
  display: flex;
  flex-direction: column;
  width: 200px;
  min-height: 60px;
  border: 1px solid orange;
  padding-left: 0;
}
ul > li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  min-width: 150px;
  min-height: 30px;
  border: 1px solid blue;
}

<ul>
  <li>Hello</li>
  <li>World</li>
</ul>

Answer 4

供参考Flexbox

*{
  margin: 0;
  padding: 0;
}
ul{
  display: flex;
  align-items: center;
  flex-direction: column;
  list-style-type: none;
  width: 300px;
  border: 1px solid red;
  padding-bottom: 25px;
}
li{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  border: 1px solid green;
  padding: 25px;
}

<ul>
    <li>Hello</li>
</ul>

Answer 5

试试这个

#outer li {
   list-style-type: none;
   width: 150px;
   line-height: 30px;
   border: 1px solid blue;
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
}

Answer 6

问题在于padding-left也是不必要的div。

#outer {
  width: 200px;
  height: 60px;
  border: 1px solid orange;
  text-align: center;
  position:relative;
  display:block;
}

#outer li {
  list-style-type: none;
  width: 150px;
  height: 30px;
  border: 1px solid blue;
  display: table-cell;
  position:relative;
  vertical-align: middle;
  margin: 0 auto;
}

这是一个更新的jsfiddle

Answer 7

li上的

display:inline-block

在CSS中水平居中表格单元格最干净的方法

7 个答案: