Question

I have an <div> in an <li>. In the Div is text, the size of that text changes.

html:

<li id="button_welcome"><div>Welcome</div></li>

css:

#about_nav li{
    height:48px;
    width:130px;
    margin-bottom:15px;
}
#about_nav li div{
    text-align:right;
    margin-right:10px;
    vertical-align:middle;
}

how do i get the text to stay in the middle of the <li>?

P.S. i have a gradient background on the <li> but i removed it because it is bulky.

cheer,

Fraser

Answer 1

UPDATE

If you want to use a gradient for a background, you could try the CSS way; check out the fiddle…

http://jsfiddle.net/UnsungHero97/F5FEg/1/

Instead, if you want to use an image, it shouldn’t affect how the text is positioned since this is a “background” image. If you do get some weird positioning, update your question and show us exactly what the problem is with code/screenshots/fiddle.

---

Give it a line-height as tall as the <li>…

#about_nav li div{
    text-align:right;
    margin-right:10px;
    line-height: 48px; /* as tall as the li */
}

Vertical alignment is a tricky business. Take a look at this article on getting a better understanding on how to vertical-align works and how to align things vertically in general…

http://phrogz.net/CSS/vertical-align/index.html

I hope this helps.
Hristo