Fatal编程技术网
  • menu/
  • Menu 如何在固定列Div中居中放置菜单Div

Menu 如何在固定列Div中居中放置菜单Div

menu

Menu 如何在固定列Div中居中放置菜单Div,menu,center,Menu,Center,我在一些我认为应该相当容易的事情上遇到了一些麻烦。如果我没有正确设置格式或提出问题，我深表歉意。这是我第一次在这个网站上提问 基本上，我想做的是将导航菜单homepageMenu置于我设置的固定宽度列的中心。虽然我无法用margin 0 auto和其他我尝试过的方法让它自动居中 下面你可以找到我正在使用的html代码和CSS。这可能是相当混乱，因为我一直在玩弄我能想到的一切 谢谢你的帮助 <HTML> <body> <div id="container">

我在一些我认为应该相当容易的事情上遇到了一些麻烦。如果我没有正确设置格式或提出问题，我深表歉意。这是我第一次在这个网站上提问

基本上，我想做的是将导航菜单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;
}
您可以将CSS更改为以下内容：

#homepageMenu {
text-align:center;
}

#homepageMenu ul{
display:inline-block;
}
主要的问题是：homepageMenu占据了整个页面，所以它看起来不像是居中的，即使它是居中的。使用display:inline块，它将收缩以适应内容。转到内容，去掉ul元素中的width:600px

下一个问题是边距：auto不会使内联块元素居中。因此，请转到“固定宽度”元素，并使用文本对齐：居中。应该这样做

或者，在主页菜单上使用display:block和margin:auto，并为其提供较小的宽度

JSFiddle：

希望有帮助

看起来你有很多不需要的风格。以下是我想出的有效方法：我删除了徽标和链接，以便更好地了解正在发生的事情

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>
我希望这有帮助

太棒了！工作得很有魅力。感谢您快速清晰的指导！没问题！很乐意帮忙！