Can someone help me to center the "ul" in the "div" vertically and horizontally according the code below?
Thank you very much!
<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
</ul>
</div>
css
#nav {
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(../images/navigation/nav.png) repeat-x center left;
z-index:999999;
}
#nav ul {
list-style:none;
margin:auto;
float:left;
padding:0;
display: block;
}
#nav ul li {
display:inline;
float:left;
margin:0px 2px;
}
#nav a {
font-size:13px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(../images/navigation/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#nav a:hover {
background:#D9D9DA none;
color: #fff;
}
#nav a.top span, #nav a.bottom span {
float:left;
width:16px;
height:16px;
}
#nav a.top span {
background:transparent url(../images/navigation/top.png) no-repeat center center;
}
#nav a.bottom span {
background:transparent url(../images/navigation/bottom.png) no-repeat center center;
}
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Center a ul inside a div using CSS grids In this method, all you need to do is put the <ul> inside a div element and then make it a grid container by applying display: grid; on it.
Just give the list centered text (e.g. ul. nav { text-align: center; } ) and the list items inline-block (e.g. ul. nav li { display: inline-block; } ). If you want to do it with margin for whatever reason, look into width: fit-content; .
Inorder to make vertical-align: middle; work, you need to use display: table; for your ul element and display: table-cell; for li elements and than you can use vertical-align: middle; for li elements. You don't need to provide any explicit margins , paddings to make your text vertically middle.
Use display: inline-block
combined with text-align: center
. This is good because it will continue to work if you add or remove links.
See: http://jsfiddle.net/thirtydot/VCZgW/
The important changes I made:
#nav {
/*height:35px;*/
padding: 6px 0;
}
#nav ul {
/*float:left;*/
text-align: center;
}
#nav ul li {
/*float:left;*/
vertical-align: top;
display: inline-block;
}
This won't directly solve your problem, but these are my go to links for css centering issues
Horizontal
http://dorward.me.uk/www/centre/
Vertical
http://phrogz.net/css/vertical-align/index.html
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