水平对齐多个图像和文本答案

【问题标题】：Align multiple images & text horizontally水平对齐多个图像和文本
【发布时间】：2015-06-24 08:45:07
【问题描述】：

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

我正在尝试将 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>

【问题讨论】：

在我回答这个问题之前。您希望每个图像都以自己的行为中心吗？还是每张图片彼此相邻，三张图片居中？
后者，我试图让所有图像在 1 行，在屏幕上居中。

标签： html css image alignment

【解决方案1】：

您只是缺少内容的容器包装器。

我添加了一个 div 来包装您的图片、文本和链接。

还将.box img 更改为.box div

这就是你所缺少的。

#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;
}

<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>

【讨论】：

您，先生，是个摇滚明星。感谢您发现我的错误！更改了代码，看起来很棒！ 谢谢！
无忧很高兴它已排序