<div id="images">
    <a href="http://xyz.com/hello">
        <img src="hello.png" width="100px" height="100px">
        <div class="caption">Caption 1</div>
    </a>
    <a href="http://xyz.com/hi">
        <img src="hi.png" width="100px" height="100px"> 
        <div class="caption">Caption 2</div>
    </a>
</div>

This is the beginning
<div class="images">
  <img src="hello.png" width="100px" height="100px">
  <div class="caption">Caption 1</div>
</div>
This is how things go here.
<div class="images">
  <img src="hi.png" width="100px" height="100px">
  <div class="caption">Caption 2</div>
</div>
Here is some more text.

#images{
    text-align:center;
    margin:50px auto;
}
#images a{
    margin:0px 20px;
    display:inline-block;
    text-decoration:none;
    color:black;
}
.images {
  margin: 0px 20px;
  display: inline-block;
  text-decoration: none;
  color: black;
  text-align: center;
  margin: 50px auto;
}