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;
}
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)
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
ul#list-nav {
margin: auto;
padding: 0;
list-style: none;
width: 525px;
display: table;
}
ul#list-nav li {
display: table-cell;
vertical-align: bottom;
}
This will make it to align in one-axis as you need :)
What it does?
I have added table
to the ul
and table-cell
to the li
. So that the list items are aligned on the same axis. vertical-align: bottom
is used to mention the axis.
Am little confused with one-axis you have mentioned in the question. In case you wanted to show the list items on the middle, then use vertical-align: middle
. So it means that this code will help you to customize easily as you wish by just changing the vertical alignment :)
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.