CODEWITHSUNDEEP
cssimagealignmentvertical-alignment
JK36
JK36

Reputation: 853

vertical align img

I have a div called images_box which has a width of 277px. Within that div I have 9 images in it, just stored as <a> tags. I've got the images to float left and line up quite nicely within my div, but I would like the images to align vertically, as some are portrait and others are landscape. I know I can do this if I enclose each image in a div, but the plugin I use to launch the gallery won't recognise which image is being fired, so i need to enclose them as just within the <a> tags.

This is the code I have, if someone can help me just align the images horizontally and vertically. I don't want the images to be skewed.

#images_box a {
    float: left;
    padding: 9px;
    width: 70px;
    height: 70px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

my data

<div id="images_box">
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg" title="morning after[explored] (mariosworld343)">
        <img src="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7234/7047458501_46a2203733_b.jpg" title="Self confined... (TVidhya)">
        <img src="http://farm8.staticflickr.com/7234/7047458501_46a2203733_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_b.jpg" title="kleiner schrittmacher (KatjaGiersig)">
        <img src="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_b.jpg" title="(caro diario.)">
        <img src="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_m.jpg" alt="" />
    </a>
</div>

Upvotes: 1

Views: 1114

Answers (3)

doptrois
doptrois

Reputation: 1570

I think i figured out what you want. float: left to get the images side by side is not necessary.

#images_box {
    background: #eee;
    overflow: hidden; /* this div will get the height of the tallest element inside it */
    white-space: nowrap; /* prevent line-breaks */
}


#images_box a {
    padding:9px;
    display: inline-block; /* required to apply vertical-align as expected */
    vertical-align: middle;
}​

Works in:

  • Internet Explorer 6+
  • and modern browsers

Live demo: http://jsfiddle.net/vjDVp/1/

Upvotes: 1

paddotk
paddotk

Reputation: 1437

Set the css to the images, not the a tags. Give them a classname (to make sure your other images are not affected) and apply the code you provided in your question to that (img.myclass). Or, at least the vertical-align.

Also, what are the sizes of the images? Do they all have the same width, same height or a certain size depending on whether it's a landscape or portrait image?

Oh and I don't know why, but text-align seems to work on img tags too sometimes.

Upvotes: 0

Tom
Tom

Reputation: 30698

Basically, it seems like you're looking for:

#images a {
    padding: 9px;
    width: 70px;
    height: 70px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

Where you can tweak the vertical-align to top or middle, as needed. There's no need for floats. The dimensions you've described in your original question are off, so apologies if I've misunderstood.

Note also that display: table-cell is not IE6/7-friendly, if that matters.

Upvotes: 0

Related Questions