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

あなたはそれがdiv内部pだと各imgをラップし、

がよりここCSS align、ここCSS 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>

に display:inline-blockを追加することができます約css CSS w3schools

HTMLブロックについてと、インライン要素が、私は、あなたがイメージがそれのテキストと一緒に滞在したい場合、あなたは別に同じコンテナに入れなければならないことである与えた液にHTML Block and Inline Elements

にここでの考え方を参照してください。あなたが望むように彼らはいつも一緒に一緒にいます。