Question

我正在构建自己的小流体网格供我个人使用，然后我转到Sass和Less，因为我不需要大框架，因为我希望了解它们背后的一些更简单的步骤。我要做的是根据页面将列居中。因为包装器只使用90％的屏幕宽度

<body>
    <div class="wrapper">
        <div class="Column">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
        </div>

        <div class="Column">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
        </div>

        <div class="Column last">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
        </div>
    </div>
</body>

CSS

body{
    text-align:center;
}

.wrapper{
    margin: 0 auto;
    width : 90%;
}

.Column{
    float : left;
    width : 22%;
    margin-right : 4%;
}

.last{
    margin-right : 0;
}

我在这里设置了一个小测试，我希望将列http://jsfiddle.net/rjtK9/

置于中心位置

Answer 1

您的包装已经居中。您的列在包装器内部左侧浮动。因此，您可能只需增加列的大小：

.Column{
    float : left;
    width : 30%;
    margin-right : 4%;
}

Answer 2

它已经集中，你只是两个保守的宽度
我只是提出了一个小fiddle

我所做的是向柱子提供33％的宽度，向右边提供20px的水槽。添加以下css

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;   
 box-sizing: border-box;

以上代码包含33％宽度的填充。
有关框大小检查的更多信息，请check here

中心百分比网格，HTML

2 个答案: