Vertical align in css

Vertical align in css

I have an

in an

. In the Div is text, the size of that text changes.

html:

Welcome
  

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

?

P.S. i have a gradient background on the

but i removed it because it is bulky.

cheer,

Fraser

Answer by theduke for Vertical align in css

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

Answer by Homer6 for Vertical align in css

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

  
My DIV
  

Answer by Hristo for Vertical align in css

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

...

#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

Answer by armonge for Vertical align in css

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;      }  

Answer by LostLin for Vertical align in css

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/

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72