Positioning of ul in nav

Question

I am trying to place Unsorted List in Navigation but I want it to be in the center of header-box.

<div class="header-box">        
    <nav>
       <ul>
       </ul>
    </nav> 
</div>

http://jsfiddle.net/9zWm9/7/ Here is the fiddle I am using same in my code.

Answer 1

First of all, clear your float. EDIT: One of my friend has got real problems with div inside , so lets change this.

<div class="header-box">
    <nav>
        <ul>
            <li>AASD</li>
            <li>AASD</li>
            <li>AASD</li>
<li style="visibility:hidden;opacity:0;height:0;width:0;clear:both"></li>
        </ul>
    </nav>
</div>

and the styles:

<style>


.header-box {
width: 400px;
height: 49px;
border: 1px solid green;
position: relative;
}
ul {
margin: 0 auto;
padding: 0;
text-align: center;
height: 100%;
margin: 13px auto;
}
nav li {
float: none;
list-style-type: none;
/* padding-left: 19px; */
/* margin-left: 20px; */
/* line-height: 50px; */
display: inline-block;
/* top: 0px; */
margin: 0 auto;
text-align: center;
}

</style>

Answer 2

Use text-align:center; for centering list's and padding for spaces and line-height for vertically center

FIDDLE

css

nav ul li{
    display: inline;
    list-style-type: none;  
    text-align:center;
    padding:0 1px;
    line-height:49px;
}

Answer 3

Please try this code. Working all Broswer

.header-box{
    float:left;
    width: 400px;
    height: 49px;   
    border: 1px solid green;
    position:relative;   
}
.header-box nav {
    float: right;   
    left: -50%;
    position: relative;
    display:block;
}
.header-box nav ul {
    left: 50%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
nav li{
    float: left;
    list-style-type: none;   
    line-height: 50px;
    padding:0 10px;
    position: relative;
}

Working Demo

Answer 4

use margin: 0px auto;

.header-box{
    width: 200px;
    height: 49px;   
    border: 1px solid green;
}
nav li{
    float: left;
    list-style-type: none;  
   margin: 0px auto;
}

Answer 5

nav ul li{
        float: left;
        list-style-type: none;
       margin: 0px auto;
       padding-left: 19px;

    }

Answer 6

nav ul {
   width : 100%;
   position:relative;
   float:left;
   margin-left:-25px;
}
nav li{
    position:relative;
    float: left;
    margin-left:10px;
    list-style-type: none;       
}

Answer 7

Replace the CSS with following..

.header-box{
    width: 400px;
    height: 49px;   
    border: 1px solid green;
}
nav ul{
    padding:0;
    margin:0;
    list-style:none;
    text-align:center;
}
nav li{
    display:inline;
}

THANKS

Answer 8

DEMO

.header-box{
    width: 400px; 
    border: 1px solid green;
    text-align:center;
}
nav ul{
    padding:0;
}
nav li{
    list-style: none;
    display:inline-block;
    margin-right: 10px;
    vertical-align: middle; 
}

Answer 9

Please update your css with below code which is with less modification :

            .header-box{
                width: 400px;
                height: 49px;   
                border: 1px solid green;
                text-align:center;
            }
            nav{
                display:inline-block;
            }
            nav ul{
                padding-left:0;
            }
            nav li{
                float: left;
                list-style-type: none;
                padding-left: 10px;
                padding-right: 10px;
            }

Answer 10

 nav ul li{
        float: left;
        list-style-type: none;
        margin: auto;
        padding-left: 20px;
        position: relative;

    }