4 replies [Last post]
stu20001
stu20001's picture
Offline
Regular
Last seen: 15 years 12 weeks ago
Joined: 2003-06-23
Posts: 30
Points: 0

Sorry - this strikes me as something that shouldbe simple to do but I can't fidn a solution anywhere and its bugging the whatnot out of me...

All I want to do is have a page with some images on the left with text to the right, vertically aligning with the centre of each image.

---------------
|-------------|
|--IMAGE---| Here is some text which is aligning
|-------------| vertically with the middle of the image.
|-------------|
---------------

---------------
|-------------|
|--IMAGE---| Here is some text which is aligning
|-------------| vertically with the middle of the image.
|-------------|
---------------

etc....

This seems like it should be easy to do but i can't get it to work.

The following is about the closest I have got but because the image is floated it is now outside the parent div so that shrinks to the height of the text and teh effect doesn't work.

.container {
clear:both;
border: 1px solid blue;
}
.image{
float:left;
vertical-align: middle;
border: 1px solid orange;
}
.text {
vertical-align:middle;
border: 1px solid green;
}

There now follows a couple of lines of text - about 100 words probably - which are related to the image on the left

Like I say, this seems like it should be really simple but the only ways I have found involve some quite dirty hacks or use of absolute positioning (which I can't use in this case)

Any ideas...?

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 13 years 41 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

I like to go to w3schools to

I like to go to w3schools to test out small functions like this. so you can start here:

http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align

put this in the generator and try it. it will do what you ask.

img.top {vertical-align:middle}
img.bottom {vertical-align:text-bottom}

This is an image inside a paragraph.

This is an image inside a paragraph.

note: this is a very cheap way of achieving this effect. if its not what you needed just reply and ill try to give you the harder method.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 35 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Don't forget a doctype.

Don't forget a doctype.

stu20001
stu20001's picture
Offline
Regular
Last seen: 15 years 12 weeks ago
Joined: 2003-06-23
Posts: 30
Points: 0

Hi - thanks for the

Hi - thanks for the suggestions but that one doesn't quite work. Its OK with short bit of text but if you have more than one line, the second line appears beneath the image. Try this in the w3schools editor and you'll see what I mean

img.top {vertical-align:middle}
img.bottom {vertical-align:text-bottom}

This is an image inside a paragraph. This is an image inside a paragraph. This is an image inside a paragraph. This is an image inside a paragraph. This is an image inside a paragraph. This is an image inside a paragraph.

This is an image inside a paragraph.

I want something that will mimic the wrapping effect of aligning the image left, but will keep all text - even text below the bottom of the image - to the right. In the "olde worlde" I would have just used a table and put the image in the left cell, text in the right.

There must be a way to achieve that with css??

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

ClevaTreva wrote:Don't

ClevaTreva wrote:
Don't forget a doctype.

Verschwindende wrote:
  • CSS doesn't make pies