html - Bootstrap - 使用 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;

  }

DEMO HERE