Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center ul in div vertically and horizontally

Tags:

html

css

center

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;
}
like image 746
shub Avatar asked Aug 12 '11 08:08

shub


People also ask

How do I center a div vertically and horizontally centered?

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.

How do I center a UL inside a div?

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.

How do I center ul horizontally?

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; .

How do you vertically align the middle Li?

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.


2 Answers

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;
}
like image 56
thirtydot Avatar answered Oct 09 '22 20:10

thirtydot


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

like image 41
ipr101 Avatar answered Oct 09 '22 19:10

ipr101