Question

我不敢相信我问这个但是我有一个页面里面有一个包装器中心div有一个带有4个盒子的div和另一个带有内容的div。这些框永远不会改变大小，但内容框将会改变。为了保持一致性，我希望div的内容位于页面中间的一半，所以每当添加更多内容时，它总是在该位置。由于某种原因，我尝试了高度/边距：自动和许多方法，它似乎不会居中。

我在这里链接了一个div布局的简单示例以及每个div的样式，请认真告诉我这是我很容易错过的东西 - 真的很尴尬！

此处所有代码： http://jsfiddle.net/SBFrq/3/

eg 
<div class="wrapper">
    <div class="thumbnails">
        <div class="col-13">thumbnail1</div>
        <div class="col-13">thumbnail2</div>
        <div class="col-13">thumbnail3</div>
        <div class="col-13">thumbnail4</div>
    </div>
    <div class="content-wrapper">
        <div class="content">
            Content
       </div>
    </div>
</div>

由于

Answer 1

这些内联样式调整应该可以解决问题（如果我理解你的话）。

.content-wrapper的高度是一个粗略的估计，所以你需要调整它。

<div class="wrapper">
    <div class="thumbnails">
        <div class="col-13">thumbnail1</div>
        <div class="col-13">thumbnail2</div>
        <div class="col-13">thumbnail3</div>
        <div class="col-13">thumbnail4</div>
    </div>
    <div class="content-wrapper" style="height: 500px; display: table; position: relative; overflow: hidden;">
        <div class="content" style="top: 50%;display: table-cell; vertical-align: middle;">
            <div style="position: relative; #top: -50%">
            ContentContentContent
            <br>ContentContentContent
            <br>ContentContentContent
            <br>ContentContentContent
            <br>ContentContent
            <br>ContentContentContent
            <br>ContentContent
            <br>ContentContentContent
            </div>
       </div>
    </div>
</div>

定位div中心，例如height：auto;

1 个答案: