Zurb foundation ZURB基金会4：子弹赢了和XX27；t中心在镀铬和IE9/IE10中对齐

好的。。因此，我（尽我所能）查看了问题列表，但没有发现任何类似的问题。。如果有答案的话，很抱歉添加了一个副本

我使用的是基础4框架，最新版本

我在很多地方都有子弹。但是，当我对带有项目符号列表的任何文本使用

text align:center

时，普通文本和列表文本是居中对齐的，但项目符号本身（正方形、圆盘等）不是

现在奇怪的部分。。。。此问题仅在Chrome和IE9/IE10中出现。它可以在Firefox/Safari上正常工作。我还尝试使用<代码>文本中心< /代码>类（基础部分。CSS），它基本上做同样的事情，即“代码>文本对齐：中心< /代码>。 这是测试链接

非常感谢您的帮助。。。谢谢你

我在很多地方都有子弹。然而，当我使用 文本对齐：任何带有项目符号列表的文本的中心，即普通文本 列表文本居中对齐，但项目符号本身 （方形、圆盘等）不是

您需要设置您的

ul

的

列表样式位置

，默认情况下该位置的值为

外部

。这意味着项目符号将位于内容流（）之外

要解决您的问题，您可以执行以下操作：

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

但是，我认为，坚持下去，这并不能完全解决你的问题，因为如果你的

ul

中有不同长度的文本，那么一切都会集中在一起。这意味着它们不会对齐，也不好看。明白我的意思

要使其居中并使其看起来美观，可以执行以下操作：

.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>   

.container{
浮动：对；
位置：相对位置；
右：50%；
背景颜色：浅绿色；
}
.内胆{
浮动：左；
位置：相对位置；
左：50%；
背景颜色：浅黄色；
}
ul.square{
列表样式类型：方形；
宽度：300px；
}
/*包装器div*/
/*外部容器将抵消50%*/
/*内部容器使其居中*/

第一项
第二项，这是一个较长的文本

---

工作示例位于采样的JSFIDLE的幻灯片2上。我添加了一种背景色，这样您可以更好地了解它的工作原理。

如果您希望保持列表样式位置：外部的显示，同时能够将项目符号和列表内容放在Chrome的中心位置：

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

缺点：11px是项目符号开头和li文本开头之间的空间宽度。这是一个丑陋的神奇数字，在不同的浏览器中可能会有所不同。不幸的是，我还没有找到任何合理化的方法