Align image to baseline

Question

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

What do you want to change about this: http://jsfiddle.net/ExplosionPIlls/n5Qmz/ ? — Explosion Pills, Mar 19 '13 at 18:29
@ExplosionPills: Dont understand your comment. The fiddle simply show my code.... — Lorenzo, Mar 19 '13 at 18:31
@Lorenzo I was just asking what you wanted changed from how your code looks now — Explosion Pills, Mar 19 '13 at 18:35
@MichalChovanec: it seems working. but there's no other way then the 90px to center the B zone? — Lorenzo, Mar 19 '13 at 18:35
@ExplosionPills: Oh, I've got it now. You can change everything you like. — Lorenzo, Mar 19 '13 at 18:36
@Lorenzo how about like [this](http://jsfiddle.net/n5Qmz/8/)? — Vucko, Mar 19 '13 at 18:42

score 1 · Answer 1 · answered Mar 19 '13 at 18:37

1

    <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)

answered Mar 19 '13 at 18:37

Anton Kizema

1,072
3
13
27

Good! But the A zone shall be aligned top right and C zone shall be aligned bottome left. – Lorenzo Mar 19 '13 at 18:40

score 1 · Answer 2 · answered Mar 19 '13 at 18:40

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

This is pretty good. However I cannot use background images because in the center I have a jquery slideshow... Also A column shall be aligned top-right — Lorenzo, Mar 19 '13 at 18:43
Here is a good resource to center your image vert and horiz: http://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div — Jon Harding, Mar 19 '13 at 18:44

score 1 · Answer 3 · answered Mar 19 '13 at 18:49

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; }

Sorry, I jsut noticed that Zone A is to the right. Do the same as my Zone C example, except make it top:0; — Jason Lydon, Mar 19 '13 at 18:51

score 1 · Answer 4 · answered Mar 19 '13 at 18:49

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.

Michal · Accepted Answer · 2013-03-19T18:46:43.393

0

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];
}

edited Mar 19 '13 at 18:46

answered Mar 19 '13 at 18:35

Michal

3,584
9
47
74

I have corrected my comment. There's no other way than the 90px? Also, A and C zones are not aligned as I have asked. – Lorenzo Mar 19 '13 at 18:37

Align image to baseline

5 Answers5