4 images in a row, how do I center specific text under each image?

Question

I don't really know anything about CSS. This question ( How can I align text directly beneath an image? ) is pretty much exactly what I need. I have 4 images and I would like them side by side, with text that correspondences with each specific image under that image. I've never used CSS so I got the images set in HTML up until that part using the directions in the question link that i posted, and the text for each image is under neither that image, but the images are not aligned in a row straight across, which is what I don't understand how to do.

Here is the coding I have:

<div class="container">
    <div class="img-with-text">
        <img src="images/CarlCall.png" border="0" alt="Carl Call"   width="177" height="229" style="border: 2px solid black;" />
        <p>Carl Call<br />(931)268-2040<br /><a href="mailto:carlcall@centergrovecoc.com">Email Carl Call</a>  </p>
    </div>
    <div class="img-with-text">
        <img src="images/sg.png" border="0" alt="Sjon Gentry" width="177" height="229" style="border: 2px solid black;" />
        <p>Sjon Gentry<br />(931)268-3273<br /><a href="mailto:sjongentry@centergrovecoc.com">Email Sjon Gentry</a></p>
    </div>
    <div class="img-with-text">
        <img src="images/jm.png" border="0" alt="John Mabery" width="177" height="229" style="border: 2px solid black;" />
        <p>John Mabery<br />(931)268-0651<br /><a href="mailto:johnmabery@centergrovecoc.com">Email John Mabery</a> </p>
    </div>
    <div class="img-with-text">
        <img src="images/tr.png" border="0" alt="Ted Ragland" width="177" height="229" style="border: 2px solid black;" />
        <p>Ted Ragland<br />(931)268-9387</p>
    </div>
</div>
<p> </p>

Any help would be greatly appreciated! This website for our church has just kind of got thrown at me to do, but I haven't learned CSS yet so I'm lost on some things.

score 1 · Answer 1 · answered Mar 20 '13 at 13:43

1

Try - DEMO

.img-with-text {
    float: left;
    margin-right: 1em;
    text-align: center;
}

answered Mar 20 '13 at 13:43

Zoltan Toth

46,981
12
120
134

Where do I place the .img-with-text part? Like I said, I know nothing about CSS. With most things, though, if someone points me to it, then I have no trouble doing it on my own every other time after that. I know where the CSS files are located in joomla on the back end of our site, but I don't know which one to edit, etc. I'm just afraid I'll mess it up. – Kristina Hammock Mar 20 '13 at 14:10
@KristinaHammock if there is an `.img-with-text` class in your markup that almost surely means there is an associated css rule somewhere in your css files. Just look for it and edit what's there. – Zoltan Toth Mar 20 '13 at 14:22

score 1 · Answer 2 · answered Mar 20 '13 at 13:51

Try this:

    <style type="text/css">
    .img-with-text { float: left; text-align: center}
    </style>

<!-- Your code -->
    <div class="container">
    <div class="img-with-text"><img src="images/CarlCall.png" border="0" alt="Carl Call"   width="177" height="229" style="border: 2px solid black;" />
    <p>Carl Call<br />(931)268-2040<br /><a href="mailto:carlcall@centergrovecoc.com">Email Carl Call</a>  </p>
    </div>
    <div class="img-with-text"><img src="images/sg.png" border="0" alt="Sjon Gentry" width="177" height="229" style="border: 2px solid black;" />
    <p>Sjon Gentry<br />(931)268-3273<br /><a href="mailto:sjongentry@centergrovecoc.com">Email Sjon Gentry</a></p>
    </div>
    <div class="img-with-text"><img src="images/jm.png" border="0" alt="John Mabery" width="177" height="229" style="border: 2px solid black;" />
    <p>John Mabery<br />(931)268-0651<br /><a href="mailto:johnmabery@centergrovecoc.com">Email John Mabery</a> </p>
    </div>
    <div class="img-with-text"><img src="images/tr.png" border="0" alt="Ted Ragland" width="177" height="229" style="border: 2px solid black;" />
    <p>Ted Ragland<br />(931)268-9387</p>
    </div>
    </div>

<!-- End of your code -->
    <p style="clear: both">Something more here </p>

Where do I put the style type= part at? Like I said, I have no understanding of CSS. :( — Kristina Hammock, Mar 20 '13 at 14:01
The easiest for you is to place it inside head tag (section) of your HTML document http://webdesign.about.com/od/beginningcss/a/where-to-put-css.htm for more information. But if you want to re-use it on other (sub)website that you may want to put it externally. — Mariusz.W, Mar 20 '13 at 14:23
Maybe I should add that Head tag will be very close to the beginning of the HTML document. — Mariusz.W, Mar 20 '13 at 14:32

score 0 · Answer 3 · answered Mar 20 '13 at 13:44

0

Try setting text-align: center in your css for class .img-with-text, and maybe display images as block. Something like this:

.img-with-text { float: left; text-align: center; }
.img-with-text img { display: block; }

answered Mar 20 '13 at 13:44

ulentini

2,413
1
14
26

4 images in a row, how do I center specific text under each image?

3 Answers3