Question

我有以下HTML：

<div class="section-cover dark-cyan" ng-style="{height: getCoverHeight()}">
    <div class="container">
        <h1 class="intro">Some intro text.</h1>
    </div>

    <div class="arrow-holder" ng-click="scrollTo('video-container');">
        <span class="arrow"></span>
    </div>
</div>

.section-cover div会在调整浏览器大小时根据视口大小动态更改高度。我需要在<h1> div内垂直对齐section-cover元素。到目前为止，我已经使用display: table-cell实现了这一点，但是现在我无法将宽度保持在100%。这是一个JSFiddle示例：

http://jsfiddle.net/AvrrM/

如何修改此选项以垂直对齐<h1>并保持宽度为100％？

Answer 1

也许是这样的？

http://jsfiddle.net/AvrrM/1/

.section-cover {
    position: relative;
    display: table;
    vertical-align: middle;
    width: 100%;
}

.container{
    display: table-cell;
    background: red;
    text-align: center;
    vertical-align: middle;
}

Answer 2

为什么它不起作用？因为table-cell类似于html表，你需要提供一个table类型的容器才能生成{ {1}}占据全宽!!

working fiddle

在您的标记中添加此CSS：

table-cell

<强> HTML

html, body {
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
}
#table {
    width: 100%;
    display:table;
    text-align:center;
}

垂直对齐h1并保持宽度为100％

2 个答案: