Align image to baseline

Problem

I need to construct a layout like the following

+-------+-----------------------------+-------+
|       |                             |       |
|       |                             |       |
|   A   |             B               |   C   |
|       |                             |       |
|       |                             |       |
|       |                             |       |
+-------+-----------------------------+-------+

In zone A I would like to put an image that shall be aligned to top right. In zone B I would like to put an image that shall be centered (vertical & horizontal) In zone C I would like to put an image that shall be aligned bottom left

I have the following markup.

<div style="float: left;">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" style="float: left;">
    [...]
</div>
<div style="float: right;">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

I have tried to use CSS vertical-align but it does'nt work. How can I obtain what I want? Thanks for helping

Problem courtesy of: Lorenzo

Solution

You can use table layout:

HTML:

<div class="wrapper">
    <div class="a">A section</div>
    <div class="b">B section</div>
    <div class="c">C section</div>
</div>

CSS:

.wrapper {
    display: table;
    width: 100%;
}

.a,
.b,
.c {
    display: table-cell;
}

.a,
.c {
    width: [what you want];
}
Solution courtesy of: Michal

Discussion

Is the layout fluid? Different heights? Widths aren't as hard to work with as heights

Zone A: do nothing, image will go there in the normal flow of the page

Zone B:
Option 1) If the box is fixed dimensions: use margin:100px auto 0; where 100px is the difference from the top
Option 2) If the box is fluid: use the position absolute + negative margin technique. For this example, the image would be 200px tall and 300px wide, so the margin top and margin left are -0.5 * those dimensions

.slideshow { position:relative; }
.slideshow img { position:absolute; top:50%; left:50%; margin:-100px 0 0 -150px; }

Zone C:

div.zoneC { position:relative; }
div.zoneC img { position:absolute; right:0; bottom:0; }
Discussion courtesy of: Jason Lydon

Solution using table-row and table-cell which will allow you to use vertical-align.

Display proprety MDN.

HTML

<div class="area">
    <div style="width:250px;display:table-cell;text-align:right;">
        <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
    </div>
    <div class="slideshow" style="display:table-cell;width:500px;vertical-align:middle;text-align:center;">[...]
    </div>
    <div style="display:table-cell;width:250px;vertical-align:bottom;text-align:left;">
        <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
    </div>
</div>

CSS

.area{
    height:600px; /* some fixed height */
    display:table-row;
 }

div{
    border: 1px solid red;
}

JSFiddle.

Table-cell width is also fixed.

Discussion courtesy of: Vucko
    <div style="float: left;">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" style="padding:25% 50%; ">
    [...]
</div>
<div style="float: right; margin-top: -51.5%;">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

And, please do not ask why 51.5% - it works pretty good (checked in Chrome), why - I do not know myself)

Discussion courtesy of: Anton Kizema

The best way to horizontally and vertically align your image in the center column is using a background image.

background:url(yourimage.gif) no-repeat center center;

I would use absolute positioning to place the images on your right and left column.

.leftcolumn { height:400px; width:100px; float:left; position:relative; border:1px solid blue; overflow:auto; }
.leftcolumn img { position:absolute; top:0px; right:0px; }
.rightcolumn { height:400px; width:100px; float:right; position:relative; border:1px solid red; overflow:auto; }
.rightcolumn img { position:absolute; bottom:0px; left:0px; }

HTML Markup:

<div class="leftcolumn">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" ></div>
<div class="rightcolumn">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

Here is the .js fiddle

Discussion courtesy of: Jon Harding

This recipe can be found in it's original form on Stack Over Flow.