CODEWITHSUNDEEP
htmlcssalignmentcentervertical-alignment
user3339662
user3339662

Reputation: 66

Centering text vertically, inside inline-block

I need to vertically align the text inside a div to the center. Pretty much the only limitation (that I can think of, right away) is that the container must be inline-block, so I can't use table-cells with vertical-align.

HTML

<div id='w'>
   <img src='http://www.science.unsw.edu.au/files/news/527C868C9284958A22F9E4D448BDDA12.JPG' />
   Lorem ipsum dolor sit amet...
</div>

CSS

html,body {margin:0;background:#333}
#w {margin:10px;background:#fff;padding:10px;display:inline-block}
img {width:20%;float:left}

(Wouldn't let me post without code, if I linked to jsfiddle..)

Here's a fiddle: http://jsfiddle.net/D5e9P/

Upvotes: 0

Views: 887

Answers (2)

Petar Vasilev
Petar Vasilev

Reputation: 4745

You can do it this way:

div#element-id {
    line-height: 20px; /* or the height of the div element */
    vertical-align: top;
}

Upvotes: 0

Shomz
Shomz

Reputation: 37711

Replace the image float with vertical-align: 

img{width:20%;vertical-align: middle;}

See here: http://jsfiddle.net/D5e9P/1/

Upvotes: 2

Related Questions