How to vertically align a DIV next to an image?

Question

I have the following html code:

<div id="personalInfo">
    <img class="photo" alt="" src="...." />

    <div id="details">
        <p>
        <label class="label">Name:</label>
        <label class="detailsLabel"></label>
        </p>

        <p>
        <label class="label">Date of birth:</label>
        <label class="detailsLabel"></label>
        </p>

        <p>
        <label class="label">Employee id:</label>
        <label class="detailsLabel"></label>
        </p>

        <p>
        <label class="label">Status:</label>
        <label class="detailsLabel"></label>
        </p>
   </div>
</div>

and the following css:

#personalInfo     
{
   width: 35%;
   float: left;
   clear: left;
   margin-top: 5%; 
   margin-left: 2%;
   font-size: 1.3em;
}
#details { margin-left: 5%; } 
.photo { 
   vertical-align: middle; 
   width: 150px; 
   height: 150px; 
   float: left; 
   margin-left: 3%; 
   border: 1px solid #d1c7ac; }
.label { margin-top: 2%; margin-left: 5%; font-weight: bold; }
.detailsLabel { margin-top: 5%; margin-left: 0.5%; }

I need the 'details' div to be vertically aligned to middle relatively to the image. How can I accomplish that?

Thanks !!!

Maybe it's just me, but I have no idea what you mean by `"I need the 'details' div to be vertically aligned to middle relatively to the image."`. — thirtydot, Jun 08 '11 at 17:03
look here - http://img703.imageshack.us/img703/2591/examplekc.png I need all the labels (that are in the 'details' div) to be at the middle of the image and next to it... — Sash, Jun 08 '11 at 17:07
Ah, I see. My window was rather narrow, so the text was underneath the image. — thirtydot, Jun 08 '11 at 18:59

score 29 · Accepted Answer · answered Jun 08 '11 at 17:45

Use display: inline-block.

#details { 
    display: inline-block; 
    vertical-align:middle;
    border:solid black 1px; 
    width: 300px; 
 } 
.photo { 
   display: inline-block; 
   vertical-align:middle;
   width: 300px; 
   height: 300px; 
   border: 1px solid #d1c7ac; 
}

bingjie2680 · Answer 2 · 2011-06-08T17:25:53.743

3

try this

#personalInfo{
   float: left;
   margin-top: 5%; 
   margin-left: 2%;
   font-size: 1.3em;
}
img{float:left;border:1px solid #333}
#details{float:left;padding:10px 0 10px 0}

working example: http://jsfiddle.net/bingjie2680/DSmKu/

the idea is to float left both the image and details. by doing so two elements will have the same height. and then you can make the detail div padding top and bottom some space.

edited Jun 08 '11 at 17:25

answered Jun 08 '11 at 17:19

bingjie2680

7,643
8
45
72

in the middle of the picture or next to the picture? – bingjie2680 Jun 08 '11 at 17:28
the solution looks exactly like the image you post above..I am not sure what you want. – bingjie2680 Jun 08 '11 at 17:33
One other issue with this design, if the text in the details has an excessive width, it will cause the entire div to fall under the image instead of simply wrapping the text. – Talon Feb 10 '17 at 12:42

score 0 · Answer 3 · answered Jun 08 '11 at 17:27

0

basically what I would do is:If you can specify a fixed height (corresponding to your image height) for your outer container(#personalInfo div)..do it! then I will set this #personalInfo position to relative. After that I will set your #details div position to absolute so that I can shift it to 50% from top and i would set margin-top:-yy where yy is half the height of the #details to offset the item up:

give a look here

answered Jun 08 '11 at 17:27

luca

36,606
27
86
125

thanks for your reply... but my details div is dynamic - it doesn't always contains all of the four labels, therefore the part with yy isn't possible in my case... – Sash Jun 08 '11 at 17:46

How to vertically align a DIV next to an image?

3 Answers3

Linked