使用col sm-4命令引导对齐图形

Question

我尝试使用col sm-4函数来水平对齐三个元素，但由于某种原因，它不起作用。无论我做什么，项目仍然以左对齐和垂直显示。这些图像的大小都是一样的。

下面是代码片段：

<section class="container">
      <div class="row">
        <figure class="col-sm-4">
          <p text-align: center>PLAY</p>
          <img src="img/m1.jpg"/>
        </figure>
        <figure class="col-sm-4">
          <p text-align: center>LEARN</p>
          <img src="img/m2.jpg"/>
        </figure>
        <figure class="col-sm-4">
          <p text-align: center>HELP</p>
          <img src="img/m3.jpg"/>
        </figure>
      </div>
    </section>

和css：

section .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px dotted #000;
  clear: none;
  }

这让我感到困惑，因为我已经用同样的技术查看过其他网站，但我找不到错误。谢谢。

Answer 1

你想这样吗？

section .row img {

  border: 4px dotted #000;
  clear: none;
  display:inline-block;
  }
  .col-sm-4
  {
    display:inline-block;

  }

Answer 2

在做了一些调整之后，我设法让您的代码正常工作(有关详细信息，请参阅代码片段中的注释)。

​

/* made the boxes use flexible boxes to lay themselves out in a row */

.flexgrid {
  display: flex;
  flex-direction: row;
  align-items: center;
 
}
/* fixed css because there were no 'row' elemeents */

/* added the > operand */

section > .col > img {
  margin: 30px 0 30px;
  width: 50%;
  border: 4px dotted #000;
  clear: none;
  align: center;
}
.col > div, .col > img {
  content-align: center
}

<section class="container">
  <div class="flexgrid">
    <figure class="col">

      <!-- change <p> to <div>  to avoid newline -->
      <div>PLAY</div>
      <center>
      <img src="img/m1.jpg" />
       </center>
    </figure>
    <figure class="col">
      <div>LEARN</div>
      <center>
      <img src="img/m2.jpg" />
       </center>
    </figure>
    <figure class="col">
      <div>HELP</div>
      <center>
      <img src="img/m3.jpg" />
        </center>
    </figure>
  </div>
</section>

​

Answer 3

你使用的屏幕尺寸似乎是一个问题，没有在col- format中指定。我已经添加了col-lg-4 col-md-4 col-sm-4 col-xs-4作为支持所有屏幕尺寸的类，它现在工作得很好。

​

section .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px dotted #000;
  clear: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section class="container">
      <div class="row">
        <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <p text-align: center>PLAY</p>
          <img src="img/m1.jpg"/>
        </figure>
        <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <p text-align: center>LEARN</p>
          <img src="img/m2.jpg"/>
        </figure>
        <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <p text-align: center>HELP</p>
          <img src="img/m3.jpg"/>
        </figure>
      </div>
</section>

​