Display Images In A Row With Text Directly Underneath - html

Question

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 1

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

Answer 2

First of all, close your <p> tags.
Then personally I would an inline-block to the p and remove the margin-left on the img.
.test {
text-align: center;
}
img {
display: block;
float: left;
border: 2px solid white;
border-radius: 100%;
margin-top: 30px;
}
p {
display: inline-block;
}

Answer 3

You needed to two things:
HTML wrapping DIVs to be able to control your blocks.
Using CSS
Please, try this fiddle which may meet your requirement:
<style>
div.test {
width:auto;
margin: auto;
}
div.block {
float: left;
}
div.block a{
display:inline-block;
margin-left: 50px;
}
div.block img {
border: 2px solid white;
border-radius: 100%;
width:150px;
}
h3 {
text-align: center;
}
</style>
<div class="test">
<div class='block'>
<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>
<div class='block'>
<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>
<div class='block'>
<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>
</div>