Question

我需要按如下方式定位3个对象：

Div 1是一个绝对定位的容器，具有固定的宽度，高度和位置。图像1应该是绝对定位的图像，仅具有固定的对齐左位置。 Div 2应该是一个绝对定位的div，只有固定的左对齐位置。

我需要将Image 1和Div 2对齐div 1的垂直中心，因为它们是具有动态高度的可变文本和图像元素。

示例：

Div 1固定为200px高。图像1是52px高变量

图像1应垂直位置：

（200/2）+（52/2）= 126px

我已经研究过CSS table-cell，vertical-align，margin as％和其他但是无法实现这一点。

感谢。

.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>

更新的代码：

<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>

Answer 1

试试这个，你必须在你的第一个div中添加另一个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（我发现了另一种方式，没有新的div，我没有在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>

Answer 2

.image1,
.div2 {
    position: absolute;
    top:0;
    bottom:0;
    margin: auto;
}

jsFiddle

垂直CSS定位划分图像

2 个答案: