Raimis Raimis - 2 months ago 10
CSS Question

How to align <li> elements on one axis in <ul>?

I have created ul element. These are html and css for my navigation bar:

Html:

<ul id="list-nav">
<li><a href="index.html"><img src="http://s20.postimg.org/w5uddizg9/small.png"></a>

</li>
<li><a href="Marsrutas.html">Maršrutas</a>

</li>
<li><a href="Nuotraukos.html">Nuotaukos</a>

</li>
<li><a href="Apie zygi.html">Apie žygį</a>

</li>
<li><a href="Apie mane.html">Apie mane</a>

</li>
<li><a href="Dviraciai.html">Dviračiai</a>

</li>
<li><a href="Kontaktai.html">Kontaktai</a>

</li>


CSS:

ul#list-nav {
margin:auto;
padding:0;
list-style:none;
width:525px;
}
ul#list-nav li {
display:inline text-align: center;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:auto;
color:#eee;
float:left;
margin:5px;
}
ul#list-nav li a {
text-align:center;
border: 1px solid transparent;
}
ul#list-nav li a:hover {
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
}


Fiddle

As you can see, all li elements are aligned to top of the page. Is there any way to align them on one axis?

(Sorry if I made some grammar mistakes english is not my native language)

K K K K
Answer

Try:http://jsfiddle.net/lotusgodkk/6hPLK/7/

   ul#list-nav {
        margin:auto;
        padding:0;
        list-style:none;
        width:525px;
        display:block;
    }
    ul#list-nav li {
        display:inline;
       text-align: center;
        vertical-align:middle;
    }
    ul#list-nav li a {
        text-decoration:none;
        padding:5px 0;
        width:auto;
        color:#eee;    
        margin:5px;
        display:inline-block;
        vertical-align:middle;
    }
    ul#list-nav li a img {
        vertical-align:middle;
    }

removed float from anchors and used display:inline-block. Added vertical-align:middle to image,li and anchors

Comments