UL will not align in center of div
Question
I'm wanting my ul to be in the center of my div however this will work. The code keeps going to the left of the webpage even though I have tried to center it. I have tried a couple of different solutions and to no avail. Here is my code:
HTML:
<div id="nav">
<ul class="links">
<!--PHP code will return menu set in <li> and <a> tags-->
<?php include "setMenu.php";?>
</ul>
</div>
CSS:
#nav {
border: 1px black solid;
}
#nav ul{
display: block-inline;
margin: 0px auto;
}
#nav li {
float: left;
padding: 5px 5%;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
border-radius: 3px;
position: center;
border: 1px black solid;
}
#nav li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
5 answers
solution1
0 2015-09-10 13:47:14
display: block-inline; should be display: inline-block; . There's no block-inline value for display. Here is a list of available values for that CSS property.
solution2
0 2015-09-10 13:48:13
Use text-align center on your div and set padding to 0 on the ul like this:
#nav { border: 1px black solid; text-align:center; } #nav ul{ display: block-inline; margin: 0px auto; padding:0; }
solution3
0 2015-09-10 14:00:30
Here's a link to a similar question: How to horizontally align ul to center of div?
I chose to go with solution #2 and applied it to your elements, where
#nav {
text-align: center;
}
#nav ul {
display: inline-block;
}
and here is a jsfiddle of the solution applied to your particular case: http://jsfiddle.net/7qd5bkse/
I had to make a few tweeks to make it look like yours, but I hope this helps and should be a good start.
solution4
0 ACCPTED 2015-09-10 14:01:27
Try this:
#nav ul{
width: 40%;
margin: 0 auto;
}
or
#nav ul{
display: table;
margin: 0 auto;
}
http://jsfiddle.net/4tnwjrag/2/
Example:
#nav { border: 1px black solid; background:green; } #nav ul{ display: table; margin: 0 auto; margin: 0px auto; background:blue; margin:0 auto; padding:0; } #nav li { padding: 5px 5%; display:table-cell; width:120px; margin-right: 5px; background-image: url("../images/button_background.jpg"); color: white; list-style:none; border-radius: 3px; position: center; border: 1px black solid; } #nav li:hover{ color: black; background-image: url("../images/button_background_hover.jpg"); }
<div id="nav"> <ul class="links"> <!--PHP code will return menu set in <li> and <a> tags--> <li>zz</li> <li>zz</li> <li>zz</li> </ul> </div>
solution5
0 2015-09-10 16:18:25
Here's another solution
#nav { border: 1px black solid; text-align: center } #nav ul { display: inline-block; list-style-type: none; } #nav li a { text-decoration: none; display: block; color: white } #nav li { float: left; padding: 5px; margin-right: 5px; background-color: grey; border-radius: 3px; border: 1px black solid; width: 100px; text-align: center } #nav li:hover { background-color: white; } #nav li a:hover { color: black; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="nav"> <ul class="links"> <li><a href="#">Menu One</a> </li> <li><a href="#">Menu Two</a> </li> <li><a href="#">Menu Three</a> </li> </ul> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.