Question

我在div（父级）中有div（child）。父母的身高是144到318（最小身高和最大身高）。这取决于窗口的大小。

我希望父母中的每个孩子都垂直对齐。我尝试使用行高，但由于我没有固定的高度，我找不到答案。

有任何建议吗？

HTML文件：

<div id="mainDivPad">
    <div id="ipadPad">
        BILD
    </div>
</div>

CSS文件：

#mainDivPad{
position: relative;
width:100%;
height:100%;
min-height:144px;
max-height:318px;
background-color:#f9e2ef;
}
#ipadPad{
float: right;
margin-right: 7%;
}

编辑：

当窗户大小改变时，孩子必须“移动”并变小。（我知道更小更高的东西是另一个主题，不应该是这里的问题）

Answer 1

使用线条高度进行垂直对齐

line-height：inherit或line-height：parent dive hieght

Answer 2

你可以通过绝对定位来做到这一点：

#ipadPad {
    margin-right: 7%;
    margin-top: -10px;
    position: absolute;
    right: 0;
    top: 50%;
}

margin-top必须是元素#ipadPad的半高。

Live Demo on JSFiddle

垂直对齐div相对于父div

2 个答案: