CODEWITHSUNDEEP
htmlcss
Willard
Willard

Reputation: 425

Centering text under image span

I'm having difficulty centering my image text captions underneath each image shown here on my development site: http://tinyurl.com/bh8uape

I'd like to have each caption centered underneath the corresponding image. How can I do this?

HTML

<!--/ Photo Thumbs Row 1-->

<div id="thumbs">

<a id="single_image" href="/bp/images/roscoes-run.jpg"><img src="/bp/images/roscoes-run(thumb).jpg" alt=""/></a>
<a id="single_image" href="/bp/images/roscoes-run-2.jpg"><img src="/bp/images/roscoes-run-2(thumb).jpg" alt=""/></a>
<a id="single_image" href="/bp/images/chicken-waffles.jpg"><img src="/bp/images/chicken-waffles(thumb).jpg" alt=""/></a>

<span class="stretch"></span>


</div>

<!--/ Description-->

<div id="desc-wrapper">
<div class="description">Roscoe's Run 2012</div>
<div class="description">Roscoe's Run 2012</div>
<div class="description">Roscoe's Run 2012</div>
</div>




<!--/ Photo Thumbs Row 2-->

<div id="thumbs">

<a id="single_image" href="/bp/images/mens-retreat-2012.jpg"><img src="/bp/images/mens-retreat-2012(thumb).jpg" alt=""/></a>
<a id="single_image" href="/bp/images/winter-retreat-2012.jpg"><img src="/bp/images/winter-retreat-2012(thumb).jpg" alt=""/></a>
<a id="single_image" href="/bp/images/new-years-eve-2012.jpg"><img src="/bp/images/new-years-eve-2012(thumb).jpg" alt=""/></a>


<span class="stretch"></span>

</div>


<!--/ Description-->

<div id="desc-wrapper">
<div class="description">Men's Retreat 2012</div>
<div class="description">Winter Retreat 2012</div>
<div class="description">New Year's Eve 2012</div>
</div>

CSS

/*Fancybox Gallery Divs*/


#thumbs {   
    width: 960px;
    margin-top:20px;
    margin-bottom:20px;
    margin-left: auto; 
    margin-right: auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

#thumbs a {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

/*Descriptions*/


#desc-wrapper {
    width: 960px;
    padding-top: 10px;
    margin-left: auto; 
    margin-right: auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.description {
    width: 360px;
    height: 25px;

}

Your help is much appreciated.

Upvotes: 0

Views: 3130

Answers (3)

Zlatko Soleniq
Zlatko Soleniq

Reputation: 388

you should add each image and the text below it in a div. something like:

<div>
img
p
</div>

that way u can make div p: text-align center;

Upvotes: 0

Oliver Tappin
Oliver Tappin

Reputation: 2541

You need to use the CSS property float and text-align to get the results your looking for:

.description {
  float:left;
  width: 320px; // Increase/decrease width for margin between images
  height: 25px;
  text-align:center;
}

After the descriptions, add another div which will clear any floating content:

<div class="description">Men's Retreat 2012</div>
<div class="description">Winter Retreat 2012</div>
<div class="description">New Year's Eve 2012</div>
<div class="clear"></div>

With the following CSS:

.clear {
  clear:both;
}

Selecting the first/last element for margin/padding:

If you're then having trouble with the extra width on one of the div tags, you can either use a pseudo class in CSS or add another class within the first or last div tag. Here's a couple of examples:

<div class="description smaller-width">Men's Retreat 2012</div>
<div class="description">Winter Retreat 2012</div>
<div class="description">New Year's Eve 2012</div>
<div class="clear"></div>

.smaller-width {
  width:300px;
}

OR

.description:first-child {
  width:300px;
}

We're using the :first-child as it is better supported in IE than :last-child. Please note, for :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.

Upvotes: 2

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

You need to do two things.

  1. Float your description-elements so they end up horizontally after each other using float: left;
  2. Center the text within your description element using text-align: center;

Something like this:

.description {
    width: 360px;
    height: 25px;
    float: left;
    text-align: center;
}

Upvotes: 0

Related Questions