如何水平对齐图像？

Question

我尝试使用显示设备：内联块和其他类似更改宽度的内容，但我的图像仅显示为垂直。

 .figure { display: inline-block; } figure.item { color: #676767; background-color: #ffffff; width: 100%; margin: 0; text-align: center; display: inline-block; } .item img { width: 100px; height: 100px; display: inline-block; } .caption { display: block; } 

 <figure class="item"> <img src="./img/facebook.png" /> <figcaption class="caption">Facebook</figcaption> <img src="./img/insta.png" /> <figcaption class="caption">Facebook</figcaption> <img src="./img/telefone.png" /> <figcaption class="caption">Facebook</figcaption> <img src="./img/email.png" /> <figcaption class="caption">Facebook</figcaption> </figure> 

现在，图像将垂直显示并带有文字。 我需要图像在其下水平放置文字。

Answer 1

使用Flex-box

我为每个img和文本制作一个环绕div。

 .item { display: flex; flex-wrap: wrap; justify-content: space-around; margin: 0; } .item img { width: 100px; height: 100px; display: inline-block; } .caption { display: inline-block; } .wrap{ width:100px; text-align: center; } 

 <figure class="item"> <div class="wrap"> <img src="./img/facebook.png" /> <figcaption class="caption">Facebook</figcaption> </div> <div class="wrap"> <img src="./img/facebook.png" /> <figcaption class="caption">Facebook</figcaption> </div> <div class="wrap"> <img src="./img/facebook.png" /> <figcaption class="caption">Facebook</figcaption> </div> <div class="wrap"> <img src="./img/facebook.png" /> <figcaption class="caption">Facebook</figcaption> </div> </figure> 

Answer 2

  figure.item { color: #676767; background-color: #ffffff; text-align: center; } .item img { width: 100px; height: 100px; } figure { width: 25%; float: left; margin: 0; text-align: center; padding: 0; } 

 <figure class="item"> <img src="./img/facebook.png" /> <figcaption class="caption">Facebook</figcaption> </figure> <figure class="item"> <img src="./img/facebook.png" /> <figcaption class="caption">Facebook</figcaption> </figure> <figure class="item"> <img src="./img/facebook.png" /> <figcaption class="caption">Facebook</figcaption> </figure> <figure class="item"> <img src="./img/facebook.png" /> <figcaption class="caption">Facebook</figcaption> </figure> 

Answer 3

您的代码段存在几个问题：

• 第一行.figure不是要作为类，而是元素选择器（即.figure ！== figure ）
• 默认情况下，块元素将显示在彼此下方。

尝试使用flex-box。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 .row { display: flex; } 

 <div class="row"> <figure> <img src="./img/facebook.png" /> <figcaption class="caption">Facebook</figcaption> </figure> <figure> <img src="./img/insta.png" /> <figcaption class="caption">Facebook</figcaption> </figure> <figure> <img src="./img/telefone.png" /> <figcaption class="caption">Facebook</figcaption> </figure> <figure> <img src="./img/email.png" /> <figcaption class="caption">Facebook</figcaption> </figure> </div>