0

Scenario

I am trying to vertical align an img inside a div, using the table cell method ('6 Methods For Vertical Centering With CSS' @Vanseo Design):

<style> .container{border: solid 1px #000;display:table;} .contentItem{display:table-cell;vertical-align:middle;} .contentImg{float:left; width: 50px; margin: 3px;} .contentDiv{width: 400px; padding: 10px 2px 2px 2px;} </style> <div class="container"> <div class="contentItem"> <img class="contentImg" title="test" src="tv1.gif"/> <div class="contentDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim.</div> </div> </div>

Issue

It simply does not work. Here is a (not)runnig jsFiddle example.

Facts

  • I am using Chrome
  • The image width must be set at fixed value (50px for instance)
  • The image height is variable and not known before the image load
  • The contentDiv div tag cannot be removed. Actually it contains a complex structure, not a simply text, with dynamic data.
Improve this question
1
  • see the answer below. I just added vertical-align:text-top; on image and removed the container of text. Commented May 22, 2013 at 9:27

4 Answers 4

Reset to default
3

Try this

<div class="container"> <div class="contentItem"> <img class="contentImg" title="test" src="data:image/gif;base64,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"/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim. </div> </div>

CSS

.container{border: solid 1px #000;display:table;} .contentItem{display:table-cell;vertical-align:middle;} .contentImg{float:left; width: 50px; margin: 3px;vertical-align:text-top;} .contentDiv{width: 400px; padding: 10px 2px 2px 2px;}

If you cant get rid of divs then simply change css

.contentDiv{width: 400px; padding: 0px 2px 2px 2px;}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I cannot get rid of the content div. Actually it contains a complex structure, not a simpy lorem ipsum.
The data inside the div are dynamic data. The lenght may change. Not solved by a sttic change in the padding.
I am sorry, but in the your fiddle I see the image aligned at the top of the container, not at the middle.
1

Your vertical alignment doesn't work as you are floating the image. if you remove the float from the image and then make the text div an inline-block element instead then your alignment will work:

.contentImg{width: 50px; margin: 3px;} .contentDiv{width: 400px; padding: 10px 2px 2px 2px; display:inline-block;}

http://jsfiddle.net/Z8GaT/1/

Improve this answer

2 Comments

No, if the contentDiv increases its length, images seems to align at the bottom http://jsfiddle.net/Z8GaT/4/.
@ADC Are you able to wrap the image in a tag? If you are: jsfiddle.net/Z8GaT/10
0

Or simply:

.yourClass{ position: relative; top: 50%; margin-top: - "the height of your image" / 2+px; }

Note, the margin-top value should be minus the image's height divided by 2 if that was unclear.

Improve this answer

1 Comment

Image height is variable and not known before the image load.
0

please check Demo here

remove 

.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}

may be this solve your problem :).

Improve this answer

1 Comment

No, the data in the contentDiv may change. I edited the facts.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.