CODEWITHSUNDEEP
csshtml
user2843365
user2843365

Reputation: 397

Place text directly below multiple images

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:

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

Upvotes: 2

Views: 3575

Answers (4)

SubjectCurio
SubjectCurio

Reputation: 4872

You can either do it in HTML4 or HTML5 by using text-align like this:

.img-wrapper {
    text-align:center;
}

HTML4 (using a div wrapper)

http://jsfiddle.net/2xGZ5/3/

HTML5 (using figure/figcaption)

http://jsfiddle.net/2xGZ5/2/

Upvotes: 1

user2578173
user2578173

Reputation:

Ditch the center and use figure and figcaption for text under images here is the code.

<div id="members_hz">
<figure>
    <img src ="images/kathy.jpg" height="150px" width="150px" alt="kathy">
    <figcaption>Kaths</figcaption>
</figure>
<figure>
    <img src ="images/steve.jpg" height="150px" width="150px" alt="steve">
    <figcaption>Steve</figcaption>
</figure>
<figure>
    <img src ="images/todd.jpg" height="150px" width="150px" alt="todd">
    <figcaption>Todd</figcaption>
</figure>
<figure>
    <img src ="images/don.jpg" height="150px" width="150px" alt="don">
    <figcaption>Don</figcaption>
</figure>
<figure>
    <img src ="images/sean.jpg" height="150px" width="150px" alt="sean">
    <figcaption>Sean</figcaption>
</figure>
</div>

Upvotes: 2

user240141
user240141

Reputation:

U can also try this :

<style>
#test{list-style:none} // you can set heigt width margin padding also.
#test > li
{
height:120px;width:100px;padding:5px; border:solid 1px #ccc;
text-align:center;float:left;margin:2px;
}
#test >li>img {//your css for image}
</style>

<ul id="test">
<li ><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
</ul>

Upvotes: 1

YOOOEE
YOOOEE

Reputation: 151

I would wrap each image in a div or span and include the name as follows

<div id="img1">
   <img src ="images/kathy.jpg" height="150px" width="150px" alt="kathy">
   <p>Kaths</p>
</div>

<div id=img2">
   <img src ="images/steve.jpg" height="150px" width="150px" alt="steve">
   <p>Steve</p>
</div>

Etc...

You would then position your div's instead of your images.

Hope this helps.

Upvotes: 2

Related Questions