Css 在列表项中将div居中

我有一个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;
}

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

HTML有一个片段，看起来像

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

li.my {
    list-style: none;
}

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

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

东西

---

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

您的css和html真的相关吗

您的

.my

类位于

li

元素上，因此您的样式应该如下所示：

li.my {
  // li styles
}

除非你的

ul

周围有一个更大的容器，否则

我的ul

在这里也不适用

除了这些更改，还可以使用

li{text align:center；}

或

div{margin:auto；}

更新（垂直居中）：

对于垂直居中，如果文本都在一行上，则尝试将

行高

设置为与

字体大小

相同的大小，如：

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

---

如果它被包装成两行或更多行，就有点棘手了

您可以使用

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

或将div本身居中：

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

对于垂直居中，您必须将

display:table单元格

元素包装在

display:table

one中，如

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

---

哎呀，打字错误。这是固定的。有没有办法使div中的内容垂直居中？有多行，但@phihag提出的解决方案有效。@JeffStorey用一个具体的例子进行了更新。是的，li（或div周围的包装器）必须具有

display:table

。如果需要IE7的浏览器支持，

display:table

将无法工作（）