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

Answer 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放在列表项中

2 个答案: