How to vertically align the texts in the middle?

I have created a div tag with height 30px and want to alighn the texts inside of this div tag vertically. Here's what I have tried.

#headlist{
border-top: 1px solid #8B4513;
background-color: #FFD700;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
font-variant: normal;
color: #FFFFFF;
border-top: 1px solid #AA0055;
height: 30px;
vertical-align: middle;
}
#headlist li {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: capitalize;
text-decoration: none;
list-style-type: disc;
display: inline;
text-align: left;
}
#headlist ul {
vertical-align: middle;
}
#headlist a:link, #headlist a:visited{
color: #CC6600;
text-decoration: none;
margin: 0px;
padding-right: 20px;
padding-left: 5px;
text-transform: capitalize;
}

It is not working. Help is appreciated.

 

you can use the attribute valign="center" when you call the div in your html...

 

As long as there is only a single line of text, use line-height (leading).

#mainlist {
    height: 30px;
    border: 1px solid black;
    }

#mainlist ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }

#mainlist li {
    display: inline;
    line-height: 30px;
    }
=========
<div id="mainlist">
  <ul>
    <li>list item</li>
  </ul>
</div>

Code (markup):

That should work.

cheers,

gary

 

The one problem with using line-height to align text vertically is that all non-IE browsers will scale your line-height along with your text size when text size is increased or decreased. This means your container will remain 30px tall, but your text will vertically span much more or much less area, giving it the appearance of looking broken.

Test thoroughly before using line-height as a centering mechanism...because this is not its intent! It is intended to create a specified amount of vertical distance between lines of text, and when you start to venture outside of the purpose of an element, you have to watch your step.

 

In usage, I would not have sized the containing div. And, I would likely state the leading in terms of ems, anyway, just for the purpose of scaling. The real limitation is having a line-break.

It's not that leading is used to center a line of text, but rather that a line of text has half its leading above and half below—which effectively centers a single line of text.

The problem with a short answer such as mine is that the OP likely does not understand the mechanism that affected the 'cure'. Further, that IE poorly supports the display property makes a more robust solution/option more complex than may be necessary.

cheers,

gary

 

The beauty of this statement is that on top of everything else, IE is reknown for bungling the em unit, particularly when you have two or more objects specified in ems in a parent/child relationship.

I'm going to guess the single line/word of text in question has to do with navigation, and that being said, you are absolutely correct - you should be able to create your parent container in such a way that it gracefully adapts to the needs of the end user without appearing to be broken, by stating its size requirements in relative terms.