对齐多个图像＆amp;水平文字

Question

我已经搜索并尝试了几种不同的建议，但没有任何效果。

我正在尝试水平居中3张图片，下面有一个标题。对CSS很新。感谢您的帮助！

#container {
  margin: auto;
  width: 1190px;
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}
.box {
  display: block;
  margin: 0px;
  white-space: nowrap;
}
.box img {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
}
.box p {
  position: relative;
  width: 100%;
  top: 12px;
  z-index: 2;
  text-align: center;
  font-size: 1.5em;
  left: 15px;
}
.clear {
  clear: both;
}
.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  width: 1190px;
}

L:
<div id="container">
  <div class="wrapper">
    <h3>Heading Here</h3>
  </div>

  <div class="box">

    <a href="#">
      <img src="images/features-icon-1.png" alt=" ">
      <p>Option 1</p>
    </a>

    <a href="#">
      <img src="images/features-icon-2.png" alt=" ">
      <p>Option 2</p>
    </a>

    <a href="#">
      <img src="images/features-icon-3.png" alt=" ">
      <p>Option 3</p>
    </a>

  </div>

  <div class="clear"></div>
</div>

Answer 1

您刚刚错过了内容的容器包装。

我添加了一个div来包装你的图像，文字和＆amp;链接。

同时将.box img更改为.box div

那就是你所遗忘的一切。

＆＃13;

＆＃13;

#container {
  margin: auto;
  width: 1190px;
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}
.box {
  display: block;
  margin: 0px;
  white-space: nowrap;
}
.box div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
}
.box p {
  position: relative;
  width: 100%;
  top: 12px;
  z-index: 2;
  text-align: center;
  font-size: 1.5em;
  left: 15px;
}
.clear {
  clear: both;
}
.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  width: 1190px;
}

＆＃13;

<div id="container">
  <div class="wrapper">
    <h3>Heading Here</h3>
  </div>

  <div class="box">
    <div>
      <a href="#">
        <img src="images/features-icon-1.png" alt=" ">
        <p>Option 1</p>
      </a>
    </div>
    <div>
      <a href="#">
        <img src="images/features-icon-2.png" alt=" ">
        <p>Option 2</p>
      </a>
    </div>
    <div>
      <a href="#">
        <img src="images/features-icon-3.png" alt=" ">
        <p>Option 3</p>
      </a>
    </div>
  </div>

  <div class="clear"></div>
</div>

＆＃13;

＆＃13;

＆＃13;