Question

我遇到html / css图片对齐问题。

我有一个html页面，其中包含大量文本和两个图像标记和figcaption标记。

当我将以下CSS应用于它时，它会并排显示图像并弄乱页面的整个流程。

img {
  float:right;
  margin:0px 0px 10px 10px;
}

下面是我的html，文字缩短了节省空间：

<figure>
  <img src="http-message.gif" alt="A di">
  <figcaption>Figur</figcaption>
</figure>

<p>The HTTP request message is route</p>  

<figure>
  <img src="www-diagram.gif" alt="A diagram">
  <figcaption>Figure 2. (1) The HTTP Req
</figcaption>
</figure>

img {
  float: right;
  margin: 0px 0px 10px 10px;
}

<figure>
  <img src="https://i.stack.imgur.com/Scqxm.png?s=64&g=1" alt="A di">
  <figcaption>Figur</figcaption>
</figure>

<p>The HTTP request message is route</p>

<figure>
  <img src="https://i.stack.imgur.com/Scqxm.png?s=64&g=1" alt="A diagram">
  <figcaption>Figure 2. (1) The HTTP Req</figcaption>
</figure>

有人可以帮我确保图片按预期在页面上流动吗？

非常感谢。

Answer 1

此处是示例 Demo

.container{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
img{
  max-width: 120px;
}
figure{
  text-align: center;
}
p{
  width: 100%;
  text-align: center;
}

<div class="container">
<figure>
	<img src="http://smalldata.io/startup/common-files/icons/sdl_logo.png" alt="A di">
	<figcaption>Figur caption</figcaption>
</figure>

<figure>
	<img src="https://sixpillarstopersia.files.wordpress.com/2012/07/fb_logo1.png" alt="A diagram">
	<figcaption>Figure 2. (1) The HTTP Req
</figcaption>
</figure>
<p>The HTTP request message is route</p>
</div>

CSS并排放置图像 - 我不希望它们并排放置

1 个答案: