如何水平對齊圖像？

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>