0

我不敢相信我在问这个问题，但我有一个页面，其中一个包装中心 div 内有一个带有 4 个框的 div 和另一个带有内容的 div。框永远不会改变大小，但内容框会。为了保持一致性，我希望将 div 的内容放在页面中间的中间，这样每当添加更多内容时，它总是在那个位置。出于某种原因，我尝试了 height/margin:auto 和许多方法，但它似乎不会居中。

我在这里链接了一个简单的 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>

谢谢

4

1 回答 1

0

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

.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>
于 2013-05-22T15:07:27.727 回答