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;
}开发者_JAVA技巧
#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

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

The magic is to use simulate a table layout with css

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

Make the line-height the same value as the height. The font size should be smaller than the height.

<style>
    #my_div{
        height: 30px;
        line-height: 30px;
        font-size: 10px;
        border: 1px solid black;
        width: 200px;
        text-align: center;
    }    
</style>
<div id="my_div">My DIV</div>

I like Hristos answer a lot =) Heres another solution:

#about_nav li{
    height:48px;
    width:130px;
    margin-bottom:15px;
    border:1px solid;
}
#about_nav li div{
    height:inherit;
    width:inherit;
    padding-right:10px;
    display: table-cell;
    text-align:right;
    vertical-align: middle;
    border:1px solid;
}

If you set the height and width of the div you can use the vertical -align property

See an Example: http://jsfiddle.net/3asEN/

Add text-align: center; to the div or the li.