How to align UL inside DIV

Question

I have an unordered list inside a div. I use it to create buttons on the 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 the objects to be arranged vertically in a DIV hosting. It is also best to set the height for ul or for li in such menus. Basically I want my button to be larger than the text with some IDENTICAL indentation from the ceiling and floor of the parent div.

Answer 1

Allright lets you try again: your div is 50 pixels high. If your distance is 10px, that leaves us with 30px for li.

 li { margin-top: 10px; margin-bottom: 10px; margin-left: 10px; float: left; background: none repeat scroll 0 0 #EEEEEE; height: 30px; line-height: 30px; } 

Answer 2

Change 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 should also keep the width of the parent. width: 700px;

Since ul and li are a block level element, it can take height and width :)

Answer 3

Use vertical alignment.

See here for more details.

Answer 4

The fun begins, 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 responsibility for the use of this code: P

 #tagscontainer li { display: table-cell; background: none repeat scroll 0 0 #EEEEEE; width: 1%; text-align: center; } 

Answer 5

Whenever I want to make 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> 

CSS:

 .menucontainer { width: 700px; margin: 0 auto; } .menucontainer li { display: inline-block; margin: 10px; } .menucontainer a { display: block; padding: 5px; }