Question

我正在处理http://jonreeve.com/behaviour/并尝试将首页上的菜单置于中心位置。它由一个带有li元素的ul标签组成，由整个菜单的div包围。其他元素似乎很好，但由于某种原因，我不能让这个菜单正确居中。

我听说要用CSS中心，你必须将宽度设置为某个值，然后设置margin-right：auto; margin-left：auto;。问题是，无论我为宽度设置的值设置为中心，但只能在两个浏览器中的一个中。为一个设置正确的值会使另一个偏离中心。

我认为这可能是字体显示方式的问题，我尝试了很多不同的方法来改变字体大小，但它仍然没有完全加起来。我也玩过在ul上而不是在div中设置宽度，或者将值设置为width：auto;或宽度：100％;但似乎没有什么能解决这个问题。

以下是我在菜单中找到的值： / *适用于铬宽度：43em; / / 适用于firefox宽度：50em; / / 适用于firefox宽度：800px; / / 适用于铬宽度：700px * /

编辑：修复网址

Answer 1

最好的方法是在ul元素上使用 display：inline-block ，在li上使用 display：inline 。然后，您可以在容器div上使用文本对齐中心。

看到这个小提琴：http://jsfiddle.net/c4urself/gF3GZ/

<强> CSS

div.element {
    text-align: center;
}

div.element ul {
    display: inline-block;
}
div.element ul li {
    display: inline;
}

<强> HTML

<div class="element">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ul>
</div>

Answer 2

如果你没有获得一致的中心，你的问题可能是你的页面有自组织标记，无效的CSS，或者你没有使用doctype或其他东西迫使某些浏览器进入quriksmode。

您没有说出您遇到问题的浏览器。但是，我认为你遇到的真正问题是双重的。首先，您的菜单段不会填充菜单容器，因此它不会使细分中心。菜单本身居中。其次，在链接元素上使用负边距也会使其偏离中心。

Answer 3

好的，问题是ul上的一些默认边距/填充，加上#menu容器上的大宽度，因此ul在您居中的位置左对齐#menu，然后由于其默认填充而向左移动了一点。

将这个添加到CSS的顶部，作为一个很好的通用“重置”，以确保所有内容只有你想要的边距/填充：

* {
    margin: 0;
    padding: 0;
}

然后将相关的CSS更改为以下内容：

#menu {
    width: 50em;
    margin: 0 auto;
    text-align: center;
}
    #menu ul {
        display: inline-block;
    }

Answer 4

我喜欢使用this technique for centering floats。

CSS：

#menu { 
    width: 100%;
    overflow: hidden;
}
#menu ul {
    list-style: none;
    position: relative;
    float: left;
    left: 50%; 
    padding: 0;
}
#menu ul li { 
    position: relative;
    float: left;
    right: 50%;
    border-left: 1px solid white;
}
#menu ul li a { 
    margin-right: -4px;
    background-color: #6d7297; 
    margin-left: -4px;
    padding: 10px 10px;
    border-left: 1px solid white; 
    color: white; 
    font-family: 'Crimson Text', serif;
    text-decoration: none;
    font-weight: bolder;
    font-stretch: semi-expanded;
    font-size: larger;
     font-variant: small-caps;    
    /*text-shadow: black 1px 1px 0px;*/
}
#menu ul li a:hover { 
    background-color: white;
    color: #6d7297; 
} 

#menu ul li:hover { 
    background-color: white;
    color: gray; 
}

预览：http://jsfiddle.net/Wexcode/vreLY/

Answer 5

你的链接中有一个拼写错误.....

无论如何我找到了它。菜单居中。如果你在index.css文件中的#menu上放置一个背景颜色，你会看到50ms的指定宽度确实在窗口中居中。但是，菜单的列表项不会填充50。将#menu的宽度设置为710px会使其居中。如果您不想使用固定宽度，可以在#contentContainer div中移动#menu div ...

<div id="contentContainer">
<div id="menu">
    <ul>
        <li><a id="aboutTextButton">About the Text</a></li>
        <li><a id="aboutProjectButton">About the Project</a></li>
        <li><a id="catalogButton" onclick="displayResult('catalog.xml','catalog.xsl')">Browse the Images</a></li>
        <li><a id="transcriptionButton" onclick="displayResult('behaviour.xml','xml-style2.xsl')">Read the Text</a></li>
    </ul>
</div>


</div>

并调整css ....

#menu { 
padding: 0 40px;
}

Answer 6

在你的div中使用 margin：0 auto;

<div id="menu" style="margin: 0 auto;">

Answer 7

您是否尝试过简单地使用css规则：

margin: auto;

Answer 8

您通常可以使用CSS边距参数居中div标签。保证金左：自动;和保证金权利：auto;它应该工作。

<body>
<div style="margin-right:auto; margin-left:auto;">
and here the other code.
</div>
</body>

然后div标签应居中。

如何在浏览器之间一致地使用css中心？

8 个答案: