Попытка выровнять текст под встроенными изображениями с помощью HTML/CSS

Question

Я пытаюсь выровнять текст под строкой из трех изображений с помощью HTML/CSS. Как скоро, когда я удаляю свои комментарии, он выравнивает все по вертикали.

<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

идея решения я дал вам, что если вы хотите, чтобы изображение, чтобы остаться вместе с его текстом, вы должны поместить их в том же контейнере отдельно. таким образом они всегда будут оставаться вместе, как вы хотите.