zurb-foundation - zurb 基础 4 : Bullets won't center align in Chrome and IE9/IE10

Question

好的..所以我已经在问题列表中检查了(尽我所能)，但没有发现任何类似的东西..如果有答案，抱歉添加重复...

我使用的是最新版本的 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

I have bullets (UL mostly) at a lot of places. However, When I use text-align: center for any text with a bulleted list, the normal text and the list text is center aligned, but the bullets themselves (square, disc and so on) are not.

您需要设置 list-style-position您的 ul ，默认值为 outside .这意味着项目符号将在内容流之外( read more about it here )。

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

ul.square {
    list-style-position: inside;
    list-style-type: square;          
    text-align:center;
}

但要坚持 这不会完全解决您的问题 ，我认为，因为如果您的 ul 中的文本长度不同那么一切都将集中。这意味着它们不会对齐并且看起来不会很好。 Look at the first slide on this fiddle看看我的意思。

要使其居中并使其看起来不错，您可以执行以下操作:

.container {
    float:right;
    position:relative;
    right:50%;
    background-color:lightgreen;
}
.inner-container {
    float:left;
    position:relative;
    left:50%;
    background-color:lightyellow;
}
ul.square {  
    list-style-type: square;              
    width:300px;
}

<div> /* the wrapper div */
    <div class="container"> /* outer container to offset by 50% */
        <div class="inner-container"> /* inner container to make it center */
            <ul class="square">
                <li>First Item</li>
                <li>Second Item, this is a longer text</li>
            </ul>
        </div>
    </div>
</div>   

工作示例位于采样的 jsfiddle 的幻灯片 2 上。我包含了一个背景颜色，以便您可以更好地了解它是如何工作的。