在列表项中居中 div答案

【问题标题】：Centering a div in a list item在列表项中居中 div
【发布时间】：2012-11-02 07:04:07
【问题描述】：

我有一个 html 页面，其中我在列表项中有一个 div，并试图在列表项中将 div 居中（div 的宽度小于列表项的宽度）。我的 CSS 看起来像

ul.my {
    width: 100px;
    padding: 0;
}

li.my {
    list-style: none;
}

div.content {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

HTML 有一个看起来像的 sn-p

<li class="my"><div class="content">stuff</div></li>

但是 div 是左对齐的。如何正确居中对齐？

【问题讨论】：

标签： css html centering

【解决方案1】：

您可以将 div 的内容水平居中

div.content {
    width: 100%;
    text-align: center;
}

或将 div 本身居中：

.my li {
    text-align: center;
}
div.content {
    display: inline-block;
}

对于垂直居中，您必须将 display: table-cell 元素包装在 display:table 中，例如

.my li {
    height: 200px;
    display: table;
}
div.content {
    display: table-cell;
    vertical-align: middle;
}

【讨论】：

@JeffStorey 更新了一个具体的例子。是的，li（或 div 周围的包装器）必须有 display:table。
如果您需要浏览器支持 IE7，display:table 将不起作用 (specs)

【解决方案2】：

你的css和html真的相关吗？

您的 .my 类位于 li 元素上，因此您的样式应如下所示：

li.my {
  // li styles
}

除非您的ul 周围有更大的容器，否则.my ul 也不适用于此处。

除了这些更改之外，请使用 li { text-align: center; } 或 div { margin: auto; }

更新（垂直居中）：

对于垂直居中，如果您的文本都在一行上，请尝试将您的 line-height 设置为与您的 font-size 相同的大小，例如：

div.content {
  font-size: 14px;
  line-height: 14px;
}

如果它包含 2 行或更多行，那就有点棘手了。 Try this.

【讨论】：

糟糕，错字了。那是固定的。有没有办法让 div 中的内容垂直居中？
有多行，但@phihag 提出的解决方案有效。