Question

我在四行中心时遇到了麻烦。我作为一个临时措施所做的是将css中的保证金百分比定义为.left和.right，并尝试以视觉为中心，这是行不通的......

在论坛上我做了这个，不仅因为行没有正确居中，当你放大列时，它们都开始在一行中对齐（而不是像表一样）。

过去一小时左右，我一直试图解决这个问题，没有运气。有帮助吗？我真的非常感激。谢谢。

沙箱：http://cssdesk.com/C5Kmk

编辑：

如果我能像我制作的那样做一张桌子，那么我会...但我对编码很新，而且我不确定如何做到这一点。

另外，我把链接放在那里因为我在发布代码时遇到了困难。

编辑2：

html / css代码最终使列居中，但它也将它们对齐了一行。

.left代码几乎奏效了。当有人放大时，仍然存在一些问题。例如，右边2列开始消失，只剩下左边两列。此外，论坛上的浮动主菜单栏位于列下方 - 虽然所有内容都集中在它下面的列/代码上，但它实际上并不是在论坛上居中，而是将它设置在最左边...... < / p>

知道发生了什么事吗？

Answer 1

现在您在.left类中使用此属性。

.left {
    float:left;
    margin-left: 15%;
}

替换为这种风格。这个属性会做什么？它将使中心成为一切......

.left {
margin: 0 auto;
text-align:center;
width:1024px;
min-width:auto;
overflow: hidden;
}

这是DEmo .. http://cssdesk.com/GGnx5

Answer 2

FIDDLE

尝试按照以下HTML结构。

<强> HTML

<div class="container">
    <div class="cf">
        <div class="ptable">
            PTABLE
        </div>
        <div class="ptable">
            PTABLE
        </div>
        <div class="ptable">
            PTABLE
        </div>
        <div class="ptable">
            PTABLE
        </div>
    </div>
    <form action="YOUR_ACTION_URL">
        FORM CONTENT
    </form>
</div>

<强> CSS

.cf:after {
    /* helps clearing the floats */
    content: "";
    display: table;
    clear: both;
}

.container {
    width: 400px; /* width of its content*/
    margin: 0 auto; /* will give auto margins on both left and right which will center it */
}

.ptable {
    float: left;
    width: 100px /* Feel free to adjust this as per your requirents. 100*4 = 400px */
}

form {
    width: 400px;
}

Answer 3

html / css代码最终使列居中，但它也将它们对齐了一行。

.left代码几乎奏效了。当有人放大时，仍然存在一些问题。例如，右边2列开始消失，只剩下左边两列。此外，论坛上的浮动主菜单栏位于列下方 - 虽然所有内容都集中在它下面的列/代码上，但它实际上并不是在论坛上居中，而是将它设置在最左边...... < / p>

知道发生了什么事吗？

问题图片：http://s1335.photobucket.com/user/dnpranks/media/Untitled15_zps89a1c5e9.png.html?sort=3&o=0

- 可能很难在图片中看到，但是左边的列位于html页面的边缘，论坛背景就在它旁边。

居中对齐列

3 个答案: