CODEWITHSUNDEEP
htmlcss
Captain Comic
Captain Comic

Reputation: 16216

how to align UL inside DIV

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.

enter image description here

Upvotes: 4

Views: 17158

Answers (5)

Gareth
Gareth

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

Kristian Frost
Kristian Frost

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

Exelian
Exelian

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

Ozair Kafray
Ozair Kafray

Reputation: 13549

Use vertical-align.

For details see here

Upvotes: 1

Kyle
Kyle

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

Related Questions