how to align UL inside DIV

Question

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.

Answer 1

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