如何在引导程序中连续对齐图像答案

【问题标题】：How to align images in a row in bootstrap如何在引导程序中连续对齐图像
【发布时间】：2016-08-15 01:39:34
【问题描述】：

嘿，我正在以 col-md-2 间距连续对齐 5 个图像。但我想对齐页面中间的行。谁能帮助我如何达到这一行？

我刚刚尝试了偏移量。但它不能正常工作。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-1">
            <img src="images/symbol1.png" alt="step 1">
        </div>
        <div class="col-md-2">
            <img src="images/symbol2.png" alt="step 1">
        </div>
         <div class="col-md-2">
            <img src="images/symbol3.png" alt="step 1">
        </div>
         <div class="col-md-2">
            <img src="images/symbol4.png" alt="step 1">
        </div>
         <div class="col-md-2">
            <img src="images/symbol5.png" alt="step 1">
        </div>
    </div>
</div>

【问题讨论】：

你说the offset col is not working properly是什么意思？

标签： html css twitter-bootstrap-3 text-align

【解决方案1】：

这就是你要找的东西？

   <div class="container" style="width: 50%">
        <div class="row" align="center">
            <div class="col-md-2 col-md-offset-1">
                <img src="images/symbol1.png" alt="step 1">
            </div>
            <div class="col-md-2">
                <img src="images/symbol2.png" alt="step 1">
            </div>
             <div class="col-md-2">
                <img src="images/symbol3.png" alt="step 1">
            </div>
             <div class="col-md-2">
                <img src="images/symbol4.png" alt="step 1">
            </div>
             <div class="col-md-2">
                <img src="images/symbol5.png" alt="step 1">
            </div>
        </div>
    </div>

【讨论】：

【解决方案2】：

您可以使用 Bootstrap 的alignment classes。只需将.text-center 类添加到该行即可。

请检查结果：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
    <div class="row text-center">
        <div class="col-md-2 col-md-offset-1">
            <img src="//placehold.it/100x100/c69/f9c/?text=1" alt="step 1">
        </div>
        <div class="col-md-2">
            <img src="//placehold.it/100x100/9c6/cf9/?text=2" alt="step 1">
        </div>
         <div class="col-md-2">
            <img src="//placehold.it/100x100/69c/9cf/?text=3" alt="step 1">
        </div>
         <div class="col-md-2">
            <img src="//placehold.it/100x100/c69/f9c/?text=4" alt="step 1">
        </div>
         <div class="col-md-2">
            <img src="//placehold.it/100x100/9c6/cf9/?text=5" alt="step 1">
        </div>
    </div>
</div>

【讨论】：