Reputation: 16216
I have unordered list inside a div. I use it to create buttons in menu.
#tagscontainer
{
width: 700px;
height: 50px;
margin: auto;
}
#tagscontainer li
{
margin-right: 1em;
float: left;
background: none repeat scroll 0 0 #EEEEEE;
}
<div id="tagscontainer">
<ul>
<li><a href="menu1"> Link 1</a></li>
<li><a href="menu2"> Link 2</a></li>
<li><a href="menu3"> Link 3</a></li>
</ul>
</div>
I want items to be centered vertically in hosting DIV. Also what is best practice to set height for ul or for li in menus like that. Basically I want my button to be larger than text with some IDENTICAL indent from parent div ceiling and floor.
Upvotes: 4
Views: 17158
Reputation: 5718
Whenever I want to do a horizontal menu, I do something like this:
<ul class="menucontainer">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
the CSS:
.menucontainer
{
width: 700px;
margin: 0 auto;
}
.menucontainer li
{
display: inline-block;
margin: 10px;
}
.menucontainer a
{
display: block;
padding: 5px;
}
Upvotes: 1
Reputation: 791
Allright lets try again: Your div has a height of 50px. If your distance is 10px that leaves us with 30px for the li's.
li {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
float: left;
background: none repeat scroll 0 0 #EEEEEE;
height: 30px;
line-height: 30px;
}
Upvotes: 3
Reputation: 5888
Hilarity ensues, you can always try this ugly hack. Also, does anyone know a way to fix this code? Use this code at your own risk, I accept kn ow responsibility for usage of this code :P
#tagscontainer li
{
display: table-cell;
background: none repeat scroll 0 0 #EEEEEE;
width: 1%;
text-align: center;
}
Upvotes: 1
Reputation: 67244
Change the CSS:
#tagscontainer li
{
background: none repeat scroll 0 0 #EEEEEE;
height: 25px;
margin: 0 auto;
width: 50%; /*these last two are needed for vertical centering*/
}
You have to also keep the width on the parent. width: 700px;
As ul
and li
is a block level element, it can accept height and width :)
Upvotes: 3