Question

我很难在内部水平居中列。在引导程序中3.我尝试了很多方法，来自margin：0 auto;显示：flex;等等，它只是赢得了＆＃34;移动＆＃34;在中间。我也发布了jsfiddle，所以你可以实时看到它：

<div class="container"> 
    <div class="row center-col">
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel   interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>                                                            
    </div>
</div>

CSS

.center-col {
margin:0 auto;
}

.pattern {
background-image:url(http://i1cevic.com/img/pattern.jpg);
margin:5px;
}

.f-icon {
float:left;
}

.x5 { font-size:40px!important }

h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing:normal;
font-size: 18px;
color:#303233;
margin-top:5px;
margin-bottom:5px;
}

Answer 1

查看Column ordering，像这样使用col-push-*：

<div class="col-md-push-4 col-md-4 col-sm-push-3 col-sm-6 pattern">Content here</div>

我刚刚在这里更新了它：https://jsfiddle.net/z2Lo4txL/7/

或者，您可以使用row课程在div中创建任何内容，然后使用col-*-offset-*或col-*-push*将其设为中心：

<div class="row>
   <div class="col-sm-offset-3 col-sm-6></div>
</div>

如果您希望它sm-6显示sm-6 col-12，请将其划分为2个空格（左右），结果为{{1} }或offset-3。

希望这有帮助。

Answer 2

将.pattern更改为

.pattern {
    background-image: url(http://i1cevic.com/img/pattern.jpg);
    margin: 5px auto;
    display: block;
    float: none;
}

这是小提琴。 https://jsfiddle.net/sgsvenkatesh/z2Lo4txL/6/embedded/result/

Answer 3

使用CSS3 Flexbox 布局模式：

    .center-col {
      display: flex;            // <-- to enable Flexbox
      flex-direction: column;   // <-- changes flex direction
      align-items: center;      // <-- centers perpendicularly to flex direction
    }

了解更多：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://flexboxin5.com/
http://flexboxfroggy.com/

在.row中水平居中的列

3 个答案: