Question

我觉得我觉得应该相当容易。（如果我不格式化，或者正确地提出问题，我道歉。这是我第一次在这个网站上询问。）

基本上我要做的是将导航菜单（#homepageMenu）置于我设置的固定宽度列中。我虽然不能为我的生活让它自动使用“margin 0 auto”以及我尝试过的其他东西。

下面你可以找到我正在使用的html代码和CSS。（因为我一直在玩我能想到的一切，所以可能很混乱。

感谢您的帮助！

 <HTML>
<body>

<div id="container">
<div class="fixedwidth">

    <a href="http://www.google.com">
    <div id="logo">
    <img src="IMAGES/James%20Ross%20Beitzel.png" />
    </div>
    </a>

<div id="homepageMenu">
       <ul>
        <li>Photography</li>
        <li>Video</li>
        <li>Design</li>
        <li>Contact</li>
        <li style="border-right:none">Strengths</li>
    </ul>
</div> 

</div>   
</div>
</body>


<CSS>
body{
margin: 0px;
min-height: 100%;
}

.fixedwidth{
position: relative;
width:600px;
margin: 0 auto;
padding-bottom: 100%;
}

#logo{
position:relative;
display: block;
padding-top: 45px;
}

#logo img{
position: relative;
width: 600px;
display:block;
margin-left: auto;
margin-right: auto;
}

#homepageMenu {
float:center;   
}

#homepageMenu ul{
position:relative;
width: 600px;
display: block;
margin-left: auto;
margin-right: auto;
}

#homepageMenu li{
font-family: arial;
position: relative;
color: orange;
display:inline-block;
padding-left: 5px;
padding-right: 5px;
float: left;
border-right: 1px solid black;
margin: 0 auto;
}

Answer 1

您可以将CSS更改为以下内容：

#homepageMenu {
text-align:center;
}

#homepageMenu ul{
display:inline-block;
}

Answer 2

主要问题：#homepageMenu占据了整个页面，因此它看起来并不像它的中心（即使它是）。使用display: inline-block，它将缩小以适合内容。转到内容，并删除width: 600px元素中的ul。

下一个问题是margin: auto并不是内联块元素的中心。因此，转到固定宽度元素，然后使用text-align: center。应该这样做。

或者，在display: block上使用margin: auto和#homepageMenu，并使其宽度更小。

JSFiddle：http://jsfiddle.net/zk9dndLx/

希望有所帮助！

Answer 3

看起来你有很多风格，不需要在那里。以下是我提出的工作原理:(我删除了徽标并链接以更好地了解发生了什么）

Styles:
    .fixedwidth{
        width:600px;
        margin: auto;
    }

    #homepageMenu {
        margin-left:auto;
        margin-right:auto;
        list-style: none;
        width: 400px;
    }

    #homepageMenu li{
        font-family: arial;
        color: orange;
        padding-left: 5px;
        padding-right: 5px;
        float: left;
        border-right: 1px solid black;
    }
Html:
 <body>
    <div class="fixedwidth">
        <ul id="homepageMenu">
        <li>Photography</li>
        <li>Video</li>
        <li>Design</li>
        <li>Contact</li>
        <li>Strengths</li>
        </ul>
    </div>   
</body>

我希望这有帮助！

如何在固定列Div中居中菜单Div

3 个答案: