Vertical CSS Positioning Divs Images

Question

I need to position 3 objects as follows:

Div 1 is a absolute positioned container, with a fixed width, height and position. Image 1 should be an absolute positioned image, with a fixed align left position only. Div 2 should be an absolute positioned div, with a fixed align left position only.

I need Image 1 and Div 2 to align to the vertical center of div 1, as these are variable text and image elements with a dynamic height.

Example:

Div 1 is 200px high fixed. Image 1 is 52px high variable

Image 1 should be vertically positoned:

(200 / 2) + (52 / 2) = 126px

I've looked into CSS table-cell, vertical-align, margin as % and others but was unable to get this working.

Thanks.

.div1
{
position: absolute;
width: 100px;
height: 100px
top: 100px;
left: 100px;
}
.image1
{
position: absolute;
left: 10px;
// something here to align the image in the vertical middle of div1
}
.div2
{
position: absolute;
left: 60px;
// something here to align the image in the vertical middle of div1
}

<div class="div1"><img class="image1"><div class="div2"></div></div>

Updated code:

<head>
    <style type="text/css">
        .div1 {
            background: yellow;
            display: table;
            position: absolute;
            width: 300px;
            height: 300px;
            top: 100px;
            left: 100px;
        }
        .newdiv {
            display: table-cell; 
            vertical-align: middle;
            height: 300px;
        }
        .image1 {
            left: 10px;
            position: relative;  
            width:50px;
            height: 80px;
            background: blue;
        }
        .div2 {
            position: relative;   
            background: red;
            left: 70px;
            width: 100%;
            height: 200px;
        }
    </style>
</head>

<div class="div1"><div class="newdiv"><div class="image1" /></div><div class="div2">123</div></div></div>

I'm not really sure what you mean by "fixed left align".. could you please provide some imagery or diagram of how this should look? — ramsesoriginal
If you go here and recreate your problem it will be very helpful in getting an answer: jsfiddle.net ? — Dave
Thanks for asking for clarification. I have updated my question. I am referring to CSS. position: absolute; left: 20px; — user1055774
So you want to vertically center an object that could change in height? Is this correct? — Jim Jeffers

Victor Victor · Accepted Answer · 2012-02-01T22:14:31

Try this, you have to add another div inside your first div:

<head>
    <style type="text/css">
        .div1 {
            background: yellow;
            display: table;
            position: absolute;
            width: 100px;
            height: 100px;
            top: 100px;
            left: 100px;
        }
        .newdiv {
            display: table-cell; 
            vertical-align: middle;
        }
        .image1 {
            left: 10px;
            position: relative;  
        }
        .div2 {
            position: relative;   
            background: red;
            left: 6px;
        }
    </style>
</head>

<div class="div1"><div class="newdiv"><img class="image1" /><div class="div2">123</div></div></div>

UPDATE (I've found another way, without the new div, I didn't test it in IE.):

             <head>
                <style type="text/css">
                    .div1 {
                        background: yellow;
                        position: relative;
                        width: 300px;
                        height: 300px;
                        top: 100px;
                        left: 100px;
                    }
                    .image1 {
                        left: 10px;
                        position: absolute; 
                        width:50px;
                        height: 80px;
                        background: blue;
                        top:0;
                        bottom:0;
                        margin:auto;
                    }
                    .div2 {
                        position: absolute;    
                        background: red;
                        left: 70px;
                        width: 100px;
                        height: 200px;
                        top:0;
                        bottom:0;
                        margin:auto;
                    }
                </style>
            </head>

            <div class="div1">
                    <div class="image1" /></div>
                    <div class="div2">123</div>
            </div>

Vertical CSS Positioning Divs Images

2 Answers