Menu
Just trying to figure out why this div won't center. If I can get this working, I'll be set.
JSFiddle
body{
margin:0;
overflow: hidden;
}
ul{
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
width:60%;
text-align:center;
}
ul li{
text-transform:uppercase;
float:left;
}
ul li a{
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover{
background-color:#7A991A;
}
#container{
width:100%;
}<div id = "container">
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">News</a></li>
<li><a href = "#">Contact</a></li>
<li><a href = "#">About</a></li>
</ul>
</div>Every time I try to display it in the browser, it looks like this:
Also how do I stretch the navigation bar to 100%? Like from the very left of the page to the right?
776
You want to center a div without specified width. For that, first remove ul{width:60%;}, then add text-align:center to the Parent and display:inline-block to the Child :
#container{
text-align:center;
}
ul{
display:inline-block;
}
body{
margin:0;
overflow: hidden;
}
ul{
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
text-align:center;
display:inline-block;
}
ul li{
text-transform:uppercase;
float:left;
}
ul li a{
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover{
background-color:#7A991A;
}
#container{
width:100%;
text-align:center;
}<body>
<div id = "container">
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">News</a></li>
<li><a href = "#">Contact</a></li>
<li><a href = "#">About</a></li>
</ul>
</div>
</body>1、delete margin: 0 auto;width:60%;from ul and add display: table;margin: 0 auto;like this：
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
/* margin: 0 auto;
width:60%; */
display: table;
margin: 0 auto;
}
2、delete margin: 0 auto;width:60%;from ul and add ‘text-align: center’ in #container，‘display: inline-block’ in ul like this:
#container{
width:100%;
text-align: center;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
display: inline-block;
}
3、
#container{
width:100%;
position: relative;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
4、
#container{
width:100%;
display: flex;
justify-content: center;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
}
5、
#container{
width:100%;
display: flex;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
}
may help you。 choose the best one for you project。
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With