CODEWITHSUNDEEP
jqueryhtmlcsscolorboxfigure
HappyHands31
HappyHands31

Reputation: 4101

How to Center Caption Below Lightbox Image

I am using a colorbox to position these images on the page: https://i.sstatic.net/VNxVq.jpg

As you can see, the captions for the first three photos are centered, but the fourth is too far to the left. Is there a way to fix this? I've tried both:

<div class="logo">
    <figure id="maggie">
        <a href="rsz_maggie.jpg" class="colorbox" id="link">
            <img src="rsz_maggie.jpg" height="250px" weight="250px" alt="Maggie"/>
            <figcaption>Maggie, 16'' x 13''</figcaption>
        </a>
    </figure>
</div>

With

#maggie {text-align:center;}

In the CSS and

<div class="logo">
    <figure class="maggie">
        <a href="rsz_maggie.jpg" class="colorbox" id="link">
            <img src="rsz_maggie.jpg" height="250px" weight="250px" alt="Maggie"/>
            <figcaption>Maggie, 16'' x 13''</figcaption>
        </a>
    </figure>
</div>

With

.maggie {text-align:center;}

In the CSS. Neither has worked. Another option would be just to get Maggie (the fourth image) centered, below the other three. I'm sure that would fix the caption problem, and I'm going to need to separate these pictures into rows as the business expands anyway. Thanks in advance for any help!

Edit: Here is my full CSS:

<style type="text/css">
<!--

    /**div {margin:1em;}**/
    div:target {color:green;}

    #link {text-decoration:none;color:#000000}

    #banner {width:100%}
    #banner img {width:100%;height:auto}

    #maggie {text-align:center;}
    .maggie {text-align:center;}

    figcaption  {font-family:Arial,sans-serif;}

    nav {width:100%;display:block;}
    nav ul {list-style-type:none;margin:0;padding:0;text-align:center;background-color:#222419}
    nav li {display:inline-block;background-color:#222419;}
    nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;font-family:Arial, sans-serif;background-color:#222419;}
    nav a:hover {text-decoration:none}

    nav a{float:left;
    margin-right:58px;
    margin-left:58px;
    display:inline-block;
    text-decoration:none;} 
    .head {width:100%}
    .logo figure {display:block;}
    .logo {float:left;width:300px; margin-right:20px; padding:10px;font-family:Arial, sans-serif;}
    #large{margin-top:1000px; height:500px; weight:500px; alt:"Wesson"}

-->
</style>

I was actually able to fix the problem by taking the that surrounded the figure, a link, and image out of my "logo" class. So now it looks like this:

<div>
    <figure>
        <a href="rsz_maggie.jpg" class="colorbox" id="link">
            <img src="rsz_maggie.jpg" height="250px" weight="250px" alt="Maggie"/>
            <figcaption>Maggie, 16'' x 13''</figcaption>
        </a>
    </figure>
</div>

Instead of this:

<div class="logo">
    <figure>
        <a href="rsz_maggie.jpg" class="colorbox" id="link">
            <img src="rsz_maggie.jpg" height="250px" weight="250px" alt="Maggie"/>
            <figcaption>Maggie, 16'' x 13''</figcaption>
        </a>
    </figure>
</div>

Now my biggest problem is figuring out how to break these images into separate rows. I already have a brake tag between the third and fourth image.

Upvotes: 2

Views: 952

Answers (3)

Preben
Preben

Reputation: 1277

None of the captions in the image are centered in my eyes. They have a fixed margin to the left.

You can see a solution in this fiddle: http://jsfiddle.net/t6bjq1rs/1/

Just edited this part of the CSS:

#maggie {text-align:center;width:250px;}
.maggie {text-align:center;}

figcaption  {font-family:Arial,sans-serif;text-align:center;}

http://jsfiddle.net/t6bjq1rs/7/ Here you can see a fiddle where I have set every #maggie to float left. Thus it just "makes" more rows if it needs to. This way you can also keep the site more mobile friendly if you need to.

Adjust the width to see the images fall in place

Upvotes: 1

Dave Goten
Dave Goten

Reputation: 701

Your Image says 

weight=250px

instead of 

width="250"

so your images are being resized to the height property of 250px only. I think you should start by adding

.maggie img {
    width: 250px;
    height: auto;
}

to avoid warping your images into strange looking squares, and then the text-align:center you have now should work. MY guess is the image of Maggie is poking outside the maggie container making it look like it's off center, when it's not relative to the container it's in.

Upvotes: 1

JRulle
JRulle

Reputation: 7568

Try being more specific with your CSS:

.maggie figcaption {
  text-align:center;
}

JSFIDDLE DEMO -- note the demo is working, but i would need your other CSS in order to ensure it is not conflicting with other CSS in your project (i.e. you may need to remove padding/margin or other styling that will hinder the center alignment)

Upvotes: 1

Related Questions