css - 将列表项中的 div 居中

Question

我有一个 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 有一段看起来像

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

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

Answer 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;
}