CSS Margin auto center for <li> tag
Question
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<style>
body,html,aside,article,header,nav,footer,ul,section,div,li,ul{
padding:0;
margin:0;
}
aside,article,header,nav,footer,section,div,ul {
display:block;
margin:0;
padding:0;
}
html {
background:#F1C4F2;
}
body {
width:1000px;
background:#FF53A9;
margin: 0 auto;
font-size:12px;
}
#header{
width:98%;
background-color:#F081F3;
padding:1%;
color:white;
font-size:1.2em;
}
#nav {
width:98%;
background-color:#C043AA;
font-size:1.1em;
padding:1%;
}
ul{
margin:0 auto;
width:100%
}
li {
list-style:none;
float:left;
margin-right:8%;
color:white;
}
OR
/*
li {
list-style:none;
display:inline-block;
margin-right:8%;
color:white;
}
*/
</style>
<body>
<div id="header">
some.com
</div><!--HEADER-->
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gallery</li>
<li>Upcoming Projects</li>
<li>Videos</li>
</ul>
</div><!--NAVIGATION-->
<div id="footer"> </div> <!--FOOTER-->
</body>
</html>
I have 'UL' tag inside a 'NAV' <DIV> ,for my navigation i have created a 'LI' items and floated it and when i apply "" margin:0 auto "" it doesn't apply.
Even when I use "" display:inline-block ""(this section is commented out) to ' LI '.Js
Fiddle link: jsfiddle
3 answers
solution1
1 ACCPTED 2015-03-20 11:03:19
Try to add text-align:center for your <ul> and remove float:left from <li> and use display:inline-block; Demo
ul {
margin:0 auto;
width:100%;
text-align:center;
}
li {
list-style:none;
display:inline-block;
margin-right:8%;
color:white;
}
solution2
0 2015-03-20 11:06:00
This will center your ul and i've also added overflow:hidden so that the floats are contained (the li ).
ul {
margin: 0 auto;
width: 50%;
overflow: hidden;
}
You were applying margin:0px auto to a 100% width element which wont work.
The result: fixed
solution3
0 2015-03-20 11:07:06
Firstly, the ul is centered but it's 100% wide so I am assuming that, in fact. you want the list items centered in the ul .
So, remove any floats, set text-align:center on the ul and make the li display as inline-block
* { padding: 0; margin: 0; } html { background: #F1C4F2; } body { width: 1000px; background: #FF53A9; margin: 0 auto; font-size: 12px; } #header { width: 98%; background-color: #F081F3; padding: 1%; color: white; font-size: 1.2em; } #nav { width: 98%; background-color: #C043AA; font-size: 1.1em; padding: 1%; text-align: center; } ul { background: blue; } li { list-style: none; display: inline-block; color: white; margin: 0 2%; }
<body> <div id="header"> some.com </div> <!--HEADER--> <div id="nav"> <ul> <li>Home</li> <li>Bio</li> <li>Gallery</li> <li>Upcoming Projects</li> <li>Videos</li> </ul> </div> <!--NAVIGATION--> <div id="footer"></div> <!--FOOTER-->
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.