Ronnie Gurr Ronnie Gurr - 25 days ago 12
CSS Question

Display Images In A Row With Text Directly Underneath

I am trying to put a few images in a row and display text that is directly underneath them and centered this is for my college work. I have tried some code but could not get it to work.



<div class="test">
<p>
<a href="https://www.facebook.com">
<img height="200px" style="display: block; margin-left: 100px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</p>
<p>
<a href="https://www.facebook.com">
<img height="200px" style="display: block; margin-left: 500px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</p>
<p>
<a href="https://www.facebook.com">
<img height="200px" style="display: block; margin-left: 500px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</p>
</div>




Answer

Personally I would do so:

.test a {
    margin-left: 10px; 
    float: left;
    text-align: center;
    overflow: auto; 
}

.test a img {
    width: 100px;
    border:2px solid white; 
    border-radius: 50%; 
}
<div class="test">
        <a href="https://www.facebook.com">
            <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
            <h3>Test</h3>
        </a>
            <a href="https://www.facebook.com">
                <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
                <h3>Test</h3>
            </a>
           
                <a href="https://www.facebook.com">
                    <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
                    <h3>Test</h3>
                </a>
</div>

Key points:

  • Use HTML for markup. Use CSS for style. Separate them.
  • The p tag is not necessary.
  • To float the three block on one line you have to set 'float:left' to the element not in the img.
  • If we use a float based layout we have to Clearing floats (because the floats' container doesn't want to stretch up to accomodate the floats). This is why I added 'overflow: auto' to the container named '.test'
  • Last but not least, there are tons of method for lay-out things with CSS. I recommend watching Flexbox.
Comments