div内的div居中

Question

我搜索了很长时间，一直在寻找这个问题的答案！

我正在为正在制作的新网站使用12列布局。 我在1行上有4个div：

<div class="colContainer">
        <div class="row">
            <div class="threecolImg">
                <p>Row 1: three</p>
            </div>
            <div class="threecolImg">
                <p>Row 1: three</p>
            </div>
            <div class="threecolImg">
                <p>Row 1: three</p>
            </div>
            <div class="threecolImg last">
                <p>Row 1: three</p>
            </div>
        </div>
    </div>

我的CSS如下：

.colContainer {
padding-left: 20px;
padding-right: 20px;
}

.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.threecolImg {
float: left;
min-height: 1px;
width: 22.05%;
}

从目前的角度来看，div彼此相邻（这很好！），但没有居中（这很糟糕！）

有人可以帮我把他们居中吗？

非常感谢，

保罗

Answer 1

用Threecol div替换所有ThreecolImg div。 他们将居中。

<div class="colContainer">
    <div class="row">
        <div class="threecol">
            <p>Row 1: three</p>
        </div>
        <div class="threecol">
            <p>Row 1: three</p>
        </div>
        <div class="threecol">
            <p>Row 1: three</p>
        </div>
        <div class="threecol last">
            <p>Row 1: three</p>
        </div>
    </div>
</div>

同时从CSS中删除：

.threecolImg {
  float: left;
  min-height: 1px;
  width: 22.05%;
}

而且，如果要在Threecol div中设置图像样式，请选择该选择器：

.threecol img {

}