嘗試使用HTML/CSS對齊內聯圖像下的文本

Question

我正在嘗試使用HTML/CSS在3個圖像的一行下對齊我的文本。正如 一樣，我刪除了我的評論，它垂直對齊一切。

<div class="inline">  
     <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" /> 
     <!-- <p> This is a test</p> -->   
     <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" /> 
     <!-- <p> This is a test</p> -->   
     <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" /> 
     <!-- <p> This is a test</p> -->  
    </div> 

見我的例子https://jsfiddle.net/gvrr25bk/1/

提前感謝！

伊萬

Answer 1

，你可以包裝每個img與它的p一個div內，並添加display:inline-block到div代替

.inline { 
 
    text-align: center; 
 
} 
 
.wrap { 
 
    display: inline-block; 
 
    margin: 0 2%; 
 
}

<div class="inline">  
 
      <div class="wrap"> 
 
      <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" /> 
 
      <p> This is a test</p>   
 
      </div> 
 
      <div class="wrap"> 
 
      <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" /> 
 
      <p> This is a test</p>  
 
      </div> 
 
      <div class="wrap"> 
 
      <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" /> 
 
      <p> This is a test</p> 
 
      </div> 
 
</div>

多看這裏CSS align這裏CSS inline-block或一般關於css CSS w3schools

關於HTML塊和內聯元素在這裏看到HTML Block and Inline Elements

的想法，我給你的是，如果你想要的形象留連同它的文本的解決方案，你應該把它們放在同一個容器分開。這樣他們將永遠保持在一起，只要你想。