Very new to HTML and CSS, but reading a lot and learning hopefully.

I have a horizontal row of 5 images of people and I want to place the names of the images directly below , centered beneath each image.

This is the HTML that I wrote:

```
    <div id="members_hz">
            <center>
            <img src ="images/kathy.jpg" height="150px" width="150px" alt="kathy">

            <img src ="images/steve.jpg" height="150px" width="150px" alt="steve">

            <img src ="images/todd.jpg" height="150px" width="150px" alt="todd">

            <img src ="images/don.jpg" height="150px" width="150px" alt="don">

            <img src ="images/sean.jpg" height="150px" width="150px" alt="sean">
            <p>Kaths</p>
            <p>Steve</p>
            <p>Todd</p>
            <p>Don</p>
            <p>Sean</p>
            </center>
        </div>

```

This is the CSS:

```css
#members_hz {
    overflow:hidden;
}

#members_hz img {
    position:relative;
    left:30px;
    display:inline;
    margin: 0 15px;
}

```

The images line up nicely across the page, but I cannot figure out the CSS to make the names line up beneath each image.

Thank you for any help!!