CODEWITHSUNDEEP
htmlcssimagevertical-alignmentcentering
nixjdm
nixjdm

Reputation: 121

How do I center an image of unknown/dynamic height in a floated div of unknown/dynamic height?

I've seen similar things posted everywhere, and have tried many of them over the last couple days and can't seem to get anywhere. I'm aiming for a pure CSS solution.

So I have a container/parent div, and inside it, a left and right div. The container stretches vertically to fit the larger of the left and right divs (both are of unknown height). The left div is floated to the left and has an image in it of unknown dimensions, and the right div will have text (about the image). Conceptually, I want a vertically centered image on the left inside it's parent div, and text to the images right. If there are other structures for doing that besides floats (for instance), I'm open.

I've made a template of the situation on jsfiddle: http://jsfiddle.net/hoopadoop/GEkaW/

I've tried display: tables; with vertical-align: middle;, background:url(image) no-repeat center center;, and stuff with margins. The only thing that's worked so far is actually using html <tables>, but I'd rather stick with CSS.

Maybe I just keep getting syntax wrong or something stupid, but I can't seem to get anything to work. Any help is much appreciated

Upvotes: 2

Views: 437

Answers (2)

admoghal
admoghal

Reputation: 1548

check here

http://jsfiddle.net/9PkxA/2/

I added new class to left div "middle" and define 

.middle
{
    margin-top:50%;
}

Hope this will help

Upvotes: 1

Sidharth Mudgal
Sidharth Mudgal

Reputation: 4264

Adding a margin-top: 50% rule for the img tags should make the images approximately vertically centered.

Upvotes: 1

Related Questions