CSS/HTML Trying to center nav ul element
Question
I'm just messing around on jsfiddle trying to practice and I came across an issue that I couldn't solve. So hopefully some of you could help me a bit here. This seems like such a silly question on the very basics of CSS but for some reason this one has me.
Basically I created a generic navigation on jsfiddle and I need the ul element centered. I'm not sure why they are stuck on the left side of the screen.
http://jsfiddle.net/jrich/ker1jLdf/
CSS and HTML as follows:
body { background-color: #45859E; font-family:'Open Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 12px; margin: 0; padding: 0; } ul { padding: 0; margin: 0 auto; } a:link { text-decoration: none; } h3 { padding: 5px; margin: 0; } header { width: 100%; background-color: #FFF; margin: 0 auto; border-bottom: solid 5px #00729B; } #nav { margin: 0 auto; padding: 10px 0; } #nav ul { width: 100%; margin: 0 auto; } #nav ul li { text-align: center; width: 100px; display: inline-block; border-bottom: solid 5px #00729B; color: #000 border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; margin: 0 auto; } ul li h3 { text-transform: uppercase; } ul li:hover { color: #999999; border-color: #00729B; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(78%, #ffffff), color-stop(78%, #ffffff), color-stop(100%, #00729b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%); /* W3C */ }
<body> <header> <div id="nav"> <ul> <li id="one"> <h3><a href="">Home</a></h3> </li> <li> <h3><a href="">About</a></h3> </li> <li> <h3><a href="">Contact</a></h3> </li> </ul> </div> </header> </body>
Thanks!
5 answers
solution1
1 ACCPTED 2015-06-03 06:55:10
solution2
0 2015-06-03 06:57:40
This simple solution just add text-align: center to ul and display: inlin-block for li
ul li { color: #000 } ul { width: 100%; text-align: center; margin: 0; padding: 0; } ul li { display: inline-block; padding: 10px; }
<ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul>
solution3
0 2015-06-03 06:57:41
Adding following line of code will solve your problem
#nav ul {
text-align: center;
}
solution4
0 2015-06-03 06:58:33
Your code is ok. The only thing you forgot to do is you dont aligned the text in center of ul.so just add: text-align:center; in the style of ul.
solution5
0 2015-06-03 07:02:14
Set
#nav ul {
display: table;
/* width: 100%; <- remove this */
}
Your code as a working fiddle (except for the :hover styles):
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.