CODEWITHSUNDEEP
htmlcss
Ivan Lubbe
Ivan Lubbe

Reputation: 13

Trying to align text under inline images using HTML/CSS

I am trying to align my text under a line of 3 images using HTML/CSS. As soon as i remove my comments it aligns everything vertically.

<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>

See my example https://jsfiddle.net/gvrr25bk/1/

Thanks in advance!

Ivan

Upvotes: 1

Views: 707

Answers (1)

Mihai T
Mihai T

Reputation: 17697

you could wrap each img with it's p inside a div and add display:inline-block to that div instead

.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>

see more here CSS align and here CSS inline-block or in general about css CSS w3schools

about HTML blocks and inline elements see here HTML Block and Inline Elements

the idea to the solution i gave you is that if you want the image to stay together with it's text , you should put them in the same container separately. in that way they will always stay together as you want.

Upvotes: 1

Related Questions