居中对齐水平导航栏CSS

我试着将显示类型更改为内嵌块，将文本更改为居中对齐，并将位置更改为相对位置，但没有任何我尝试过的似乎可行。居中对齐水平导航栏CSS

HTML代码：

<div id="header"> 
    <h1>Politics and Social Media</h1> 
    <div id="navbar"> 
     <ul id="menu"> 
      <li><a href="index.html" class="button selected">Overview</a> 
      </li> 
      <li><a href="media.html" class="button">Media</a></li> 
      <li><a href="author.html" class="button">Author</a></li> 
     </ul> 
    </div> 
    <img src="images/barack.jpg" width="100%" height="75%" margin="0" 
    padding="0" alt="Barack Obama and Joe Biden looking at phone" > 
</div><!--end of header-->

CSS代码：

#navbar { 
    width: 100%; 
    height: 45px; 
    overflow: hidden; 
    margin: 0; 
} 

ul#menu { 
    list-style: none; 
    margin-left: 0; 
} 
ul#menu li { 
    float: left; 
    margin-left: -40px; 
}

来源

2017-10-19 JGraves

这是你想要达到什么样的？

CSS：

#header { 
    text-align: center; 
} 
#navbar { 
    width: 100%; 
    height: 45px; 
    overflow: hidden; 
    margin: 0; 
} 

ul#menu { 
    list-style: none; 
    padding-left: 0px; 
} 
    ul#menu li { 
    display: inline-block; 
}

HTML：

<div id="header"> 
<h1>Politics and Social Media</h1> 
<div id="navbar"> 
    <ul id="menu"> 
     <li><a href="index.html" class="button selected">Overview</a> 
     </li> 
     <li><a href="media.html" class="button">Media</a></li> 
     <li><a href="author.html" class="button">Author</a></li> 
    </ul> 
</div> 
<img src="images/barack.jpg" width="100" height="75" margin="0" 
padding="0" alt="Barack Obama and Joe Biden looking at phone" > 
</div><!--end of header-->

来源

2017-10-19 01:47:11 Cons7an7ine

试试这个：

ul#menu { 
    list-style: none; 
    margin: 0 auto; 
}

来源

2017-10-19 01:47:09

改变你的CSS让你有家长>的text-align：中心和儿童>显示：inline-block的;

ul#menu { 
    list-style: none; 
    margin-left: 0; 
    text-align:center; 
    padding:0px; 
} 
ul#menu li { 
    display:inline-block; 
}

这里有一个JSFiddle

来源

2017-10-19 01:53:28

居中对齐水平导航栏CSS

回答

相关问题