Question

所以我花了大约一小时左右试图找出如何将标题图像放在一起。当我尝试使用figcaption或类似的东西在其下面添加文本时，其他人的大多数解决方案/问题都无法解决。

我希望文本位于图像下方并与图像一起移动但是由于某种原因，当我添加文本时，它会将另一个图像移动到另一个图层。任何帮助将不胜感激。谢谢。

（这只是其中的一小部分，因为在这种风格中还有很多与此问题无关的其他内容）

＆＃13;

.gunimage {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  width: 15%;
  padding-left: 20px;
}
#images {
  text-align: center;
}

＆＃13;

<div id="images">
  <img class="gunimage" border="0" alt="idk" src="gg.png" /></a>
  <p>this is text</p>
  <img class="gunimage" border="0" alt="idk" src="gg2.png" /></a>
  <p>this is also text</p>
</div>

＆＃13;

Answer 1

此方法使用HTML 5 figure and figcaption元素和CSS 3 flexbox。

#images {
    display: flex;
    justify-content: center;
}

figure {
    text-align: center;
}

<div id="images">
    <figure>
        <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
        <figcaption>this is text</figcaption>
    </figure>
    <figure>
        <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
        <figcaption>this is also text</figcaption>
    </figure>
</div>

注意：所有主流浏览器except IE 8 & 9都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer中的更多详细信息。

Answer 2

以下是使用浮点数的解决方案

＆＃13;

.gunimage {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  width: 15%;
}
.half {
  width:50%;
  float: left;
}
#images {
  text-align: center;
  width: 100%;
}

＆＃13;

<div id="images">
  <div class="half">
    <img class="gunimage" border="0" alt="idk" src="gg.png">
    <p>this is text</p>
  </div>
  <div class="half">
    <img class="gunimage" border="0" alt="idk" src="gg2.png">
    <p>this is also text</p>
  </div>
</div>

＆＃13;

将图像与字幕并排对齐

2 个答案: