Question

好的..所以我在问题列表中检查过（尽我所能）但是没有找到类似的东西..如果有答案，请为添加重复道歉... < / p>

我正在使用带有最新版本的Foundation 4框架。

我在很多地方都有子弹（大多数是UL）。但是，当我对带有项目符号列表的任何文本使用text-align: center时，普通文本和列表文本是居中对齐的，但子弹本身（方形，圆盘等）不是。

现在奇怪的部分......这个问题在Chrome和IE9 / IE10中出现仅。它在Firefox / Safari上按预期工作。我也尝试使用.text-center类（foundation.css的一部分），它基本上做同样的事情，即text-align: center。

这是测试链接http://www.crevolve.com/testing/ ....

非常感谢任何帮助......谢谢......

Answer 1

我在很多地方都有子弹（大多数是UL）。但是，当我使用时 text-align：带有项目符号列表的文本的中心，普通文本列表文本居中对齐，但子弹本身（方形，圆盘等）不是。

您需要设置list-style-position的{{1}}，默认值为ul。这意味着子弹将位于内容流之外（read more about it here）。

要解决您的问题，您可以这样做：

outside

但我认为，坚持并不能完全解决您的问题，因为如果您ul.square { list-style-position: inside; list-style-type: square; text-align:center; }中的文字长度不同，那么一切都会集中在一起。这意味着它们不会对齐，看起来不会很好。 Look at the first slide on this fiddle看看我的意思。

要让它居中并使其看起来很好，您可以执行以下操作：

ul

工作样本位于采样jsfiddle的幻灯片2上。我添加了背景颜色，以便您更好地了解其工作原理。

Answer 2

如果你想保持list-style-position：outside的显示，同时能够将你的子弹和列表内容放在Chrome上：

ul {
    list-style-position: inside;
}
ul {
    padding-left: 11px;
    text-indent: -11px;
}
li {
    margin-left: -11px;
}

下行：11px是子弹开始时的空间宽度和你的文字的开头。它是一个丑陋的幻数，可能因浏览器而异。不幸的是，我还没有找到任何合理化的方法......

zurb foundation 4：子弹不会在Chrome和IE9 / IE10中居中对齐

2 个答案: