Question

我有一个未知高度的div，高度为100％。我希望内部div从外部div的底部垂直对齐30％。

在下面的工作示例中，使用middle对齐外部div的垂直中间的内部div。但是使用30% 将内部div推到浏览器窗口之外的一半！

“vertical-align：middle”的屏幕截图：

enter image description here

“vertical-align：30％”的屏幕截图：

enter image description here

为什么呢？我怎样才能将内部div放到箭头指向的位置？

解决方案不能为内部div定义高度！

Sampe代码：

<!doctype html>
<html>
<head>
    <style type="text/css">
        /* reset */
        html, body {
            margin:0;
            padding:0;
        }
        html, body, #wrapper {
            height: 100%;
        }
        #wrapper {
            left: 0;
            position: fixed;
            text-align: center;
            top: 0;
            width: 100%;
        }
        #wrapper:before {
            content: "";
            display: inline-block;
            height: 100%;
            margin-right: 0;
            vertical-align: middle; // or 30%  <= change position here
            width: 1px;
        }
        #header {
            display: inline-block;
            position: relative;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header id="header">
            <h1>Text</h1>
            <p>More text</p>
        </header>
    </div>
</body>
</html>

Answer 1

    #wrapper:before {
        content: "";
        display: inline-block;
        height: 70%;
        margin-right: 0;
        width: 1px;
    }

垂直对齐内部div以外部div的高度百分比

1 个答案: