CODEWITHSUNDEEP
htmlcss
dKen
dKen

Reputation: 3127

Forcing link to match image size without float in CSS

I've got some linked images centered in a div. After the last image, I want to add a text link. For some reason, the links don't wrap around the images, they sit below the images, meaning my text link at the end is in line with the previous links, below the images themselves. What I want is for the text link to be at least in line with the images.

Check out the JSFiddle: http://jsfiddle.net/RFzMv/

If I float the links around the images, then they are the same size as the image and everything works as expected, but then the images aren't centered in the master div. The number of images can change, as can their dimensions, so I can't set them using absolute or anything like that.

How can I get the link to be the same size and position as the image it surrounds without using float, so the following link is in line with the images?

Upvotes: 0

Views: 4173

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

The HTML is nearly the same as yours except for the third child div. I wrapped the text in a <span> div and then that is contained by the a.imageCount link.

<div class="centered"> 
    <a class="image-link" href="">
        <img src="http://placekitten.com/100/100" width="100" height="100" />
    </a>

    <a class="image-link" href="">
        <img src="http://placekitten.com/110/110" width="100" height="100" />
    </a>

    <a href="#photos" class="imageCount">
        <span>some text</span>
    </a>
</div>

The CSS looks like this:

.centered {
    width: 500px;
    height: 300px;
    background-color: #EEE;
    text-align: center;
}
a {
    text-decoration: none;
    outline: 1px dotted blue;  /* optional to show content boxes */
}
.image-link {
    display: inline-block;
    vertical-align: bottom; /* try out: bottom, middle, top */
}
.image-link img {
    vertical-align: bottom; /* get rid of small white space below images */
}
.imageCount {
    display: inline-block;
    border: 1px solid blue;  
    padding: 5px;
    border-radius: 5px;
    background-color: lightgray;
    margin-left: 10px;
}
.imageCount span {
    /* in case you need to style the text in a special way */
}

You can see the demo fiddle at: http://jsfiddle.net/audetwebdesign/uBVHC/

How This Works

Basically you have three inline block child elements in div.centered, so text align works as you expect.

I assume that one of the images will be the tallest element in the line and that you would like to have some control over the positioning of a.imageCount.

If you apply the vertical-align property to .image-link, then that will determine how the images are aligned vertically with respect to the a.imageCount element. You can try out the three principal values (top, middle, bottom) and pick one that suits the design you want.

If you want to adjust the top (or bottom) position, simply use a top (or bottom) margin on .imageCount and display: top (or bottom) on .image-link.

You can adjust the horizontal separation you a left margin on .imageCount.

Upvotes: 2

whitehead1415
whitehead1415

Reputation: 435

If you have a container div that is position relative then you can have a div inside it with position absolute that is positioned relative to the containing div and not the entire window.

This would let you keep your centered images while placing the link anywhere you want.

#centered { position: relative; width: 500px; height: 300px; background-color: #EEE; text-align: center; }
.link-that-you-want-to-be-inline { position:absolute;margin-top:50px; }

here is a fiddle:http://jsfiddle.net/RFzMv/39/

Upvotes: 2

Related Questions