0

我有一个 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 是左对齐的。如何正确居中对齐？

4

2 回答 2

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;
}
于 2012-11-01T23:02:24.110 回答
0

你的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 行或更多行，那就有点棘手了。 试试这个。

于 2012-11-01T22:59:00.753 回答