Question

我希望创建类似于所示图像的内容：

enter image description here

我设法让#wrap水平居中，但那就是它...... 任何帮助将不胜感激。

<style>
    #wrap
    {
    Margin-left:auto;
    Margin-right:auto;
    padding: 10px;
    }

    #content
    {
    padding: 10px;
    }
</style>

~~~

<body>
    <div id="wrap">

       <div id="content">
       1
       </div>
       <div id="content">
       2
       </div>
       <div id="content">
       3
       </div>

    </div> <!--end wrap-->
</body>

Answer 1

由于您正在处理块元素（https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements），因此您需要内部元素具有固定高度，以便您可以提供position: absolute。此外，请记住，元素的ID必须是唯一的。如果您想多次使用元素，请指定class名称，例如

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>

所以，整个事情看看http://jsfiddle.net/YFncP/253/

希望这有帮助。

Space以水平和垂直方式划分居中

1 个答案: