Question

我已经有很长一段时间没有进行前端编码了，很长一段时间没有编码。现在我又尝试了一些事情，我有点陷入困境，并希望大家可以帮助我：）

我有一个带嵌套div的bootstrap行。我想中心对齐嵌套的div，但似乎无法弄清楚如何。有没有人能够把我推向正确的方向？我的代码如下：

<!--Features block Start-->
<div class="row">
<div id="features" class="col-sm-12">
    <div class="row"> 
        <div class="col-sm-3 features-content"><img class="center" src="img/icons/ssd.png" alt="ssd"><h3 class="center">SSD.</h3><p class="center">Placeholder text.</p></div>
        <div class="col-sm-3 features-content"><img class="center" src="img/icons/network.png" alt="network"><h3 class="center">Network.</h3><p class="center">Place holder text</p></div>
        <div class="col-sm-3 features-content"><img class="center" src="img/icons/database.png" alt="database"><h3 class="center">Database.</h3><p class="center">Placeholder text.</p></div>
    </div>  
    <div class="row features-content"> 
        <div class="col-sm-3 features-content"><img class="center" src="img/icons/opensource.png" alt="ssd"><h3 class="center">We <span class="glyphicon glyphicon-heart heart-color"></span> Open Source.</h3><p class="center">Placeholder text.</p></div>
        <div class="col-sm-3 features-content"><img class="center" src="img/icons/cpanel.png" alt="network"><h3 class="center">CPanel.</h3><p class="center">Placeholder text.</p></div>
        <div class="col-sm-3 features-content"><img class="center" src="img/icons/support.png" alt="database"><h3 class="center">24/7 Support.</h3><p class="center">Placeholder text.</p></div>
    </div>               
</div>
</div>
<!--Features block Stop-->

使用以下CSS

#features{
background-color:#e1dbc5;
position: relative;
}
#features-content{
margin: 0 auto;
}

导致：http://i.imgur.com/AhJKjkE.png

任何人都可以为我阐明这一点吗？如果有什么不清楚或您需要我的更多信息，请询问！

亲切的问候，罗。

Answer 1

#features-content{
margin: 0 auto;
text-align:center;
}
#features{
background-color:#e1dbc5;
position: relative;
    text-align:center;
}

两个ID的文本对齐中心

Answer 2

实际上，如果您使用默认网格进行更多嵌套以使您的设计正确

，则会更容易

<div class="row">
    <div id="features" class="col-sm-12" style="text-align:center;">
        <div class="row"> 
            <div class="col-sm-4 features-content">
                <img class="center" src="img/icons/ssd.png" alt="ssd">
                <h3 class="center">SSD.</h3>
                <p class="center">Placeholder text.</p>
            </div>
            <div class="col-sm-4 features-content">
                <img class="center" src="img/icons/network.png" alt="network">
                <h3 class="center">Network.</h3>
                <p class="center">Place holder text</p>
            </div>
            <div class="col-sm-4 features-content">
                <img class="center" src="img/icons/database.png" alt="database">
                <h3 class="center">Database.</h3>
                <p class="center">Placeholder text.</p>
            </div>
        </div>  
        <div class="row features-content" style="text-align:center;"> 
            <div class="col-sm-4 features-content">
                <img class="center" src="img/icons/opensource.png" alt="ssd">
                <h3 class="center">We <span class="glyphicon glyphicon-heart heart-color"></span> Open Source.</h3>
                <p class="center">Placeholder text.</p>
            </div>
            <div class="col-sm-4 features-content">
                <img class="center" src="img/icons/cpanel.png" alt="network">
                <h3 class="center">CPanel.</h3>
                <p class="center">Placeholder text.</p>
            </div>
            <div class="col-sm-4 features-content">
                <img class="center" src="img/icons/support.png" alt="database">
                <h3 class="center">24/7 Support.</h3>
                <p class="center">Placeholder text.</p>
            </div>
        </div>               
    </div>
</div>

check this

Bootstrap css中心嵌套div

2 个答案: