By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,952 Members | 1,726 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,952 IT Pros & Developers. It's quick & easy.

Image styling

P: n/a
Hello,

I would like to have a large image with text right next to it. This
text should a) be vertically centered and b) stay *next* to the image
even when it's multiple line.
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX spans across several
XXXXXXXXXXXXXXXXX lines
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX

So far, when I give the img the vertical-align:middle attribute, it
works, but only the first line of text stays where it belongs:

XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
that spans across several lines
Could you give me a hint about how to achieve the desired result?

Thanks,
Alex

Oct 19 '06 #1
Share this Question
Share on Google+
10 Replies


P: n/a
In article
<11*********************@f16g2000cwb.googlegroups. com>,
"Alexander Fischer" <ha***********@hotmail.comwrote:
Hello,

I would like to have a large image with text right next to it. This
text should a) be vertically centered and b) stay *next* to the image
even when it's multiple line.
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX spans across several
XXXXXXXXXXXXXXXXX lines
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX

So far, when I give the img the vertical-align:middle attribute, it
works, but only the first line of text stays where it belongs:

I guess a hint is at http://www.sn2.com.au/reports.html... but it
is not quite middle...

--
dorayme
Oct 19 '06 #2

P: n/a
On 2006-10-19, Alexander Fischer <ha***********@hotmail.comwrote:
Hello,

I would like to have a large image with text right next to it. This
text should a) be vertically centered and b) stay *next* to the image
even when it's multiple line.
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX spans across several
XXXXXXXXXXXXXXXXX lines
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX

So far, when I give the img the vertical-align:middle attribute, it
works, but only the first line of text stays where it belongs:

XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
that spans across several lines
This is the correct behaviour-- the image sits in the text as though it
were a word, and flows with it.
Could you give me a hint about how to achieve the desired result?
The hard part here is how to centre the text vertically. A positioned
div can be centered in its container with auto top and bottom margins,
but only if its height is specified. We can't specify the height here,
because we don't know how many lines the text is going to take up.

So I think a table is the best way to go, and the vertical-align: middle
property does just what we want:

<head>
<style type="text/css">
td
{
vertical-align: middle; /* usually the default anyway */
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="large-image.png">
</td>
<td>
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
</td>
</tr>
</table>
</body>

For the purists, you can of course do this with display: table-cell and
display: table and keep your HTML clean of layout information.
Oct 19 '06 #3

P: n/a
In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:
In article
<11*********************@f16g2000cwb.googlegroups. com>,
"Alexander Fischer" <ha***********@hotmail.comwrote:
Hello,

I would like to have a large image with text right next to it. This
text should a) be vertically centered and b) stay *next* to the image
even when it's multiple line.
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX spans across several
XXXXXXXXXXXXXXXXX lines
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX

So far, when I give the img the vertical-align:middle attribute, it
works, but only the first line of text stays where it belongs:


I guess a hint is at http://www.sn2.com.au/reports.html... but it
is not quite middle...
A padding-top:30px for the <pdoesn't seem like a particularly
good solution, for a number of reasons. The caption also gets cut
off (with no horizontal scrollbar) if the browser window isn't wide
enough... hopefully, there's a better solution!
Oct 19 '06 #4

P: n/a
In article
<no****************************@news1.chem.utoront o.ca>,
David Stone <no******@domain.invalidwrote:
I guess a hint is at http://www.sn2.com.au/reports.html... but it
is not quite middle...

A padding-top:30px for the <pdoesn't seem like a particularly
good solution, for a number of reasons. The caption also gets cut
off (with no horizontal scrollbar) if the browser window isn't wide
enough... hopefully, there's a better solution!
You are right, David, it's not so good! In fact, it's terrible
come to think of it...

--
dorayme
Oct 20 '06 #5

P: n/a
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
For the purists, you can of course do this with display: table-cell and
display: table and keep your HTML clean of layout information.
Please go on and give an example, I'd be all ears... I want to be
pure and good... I have been bad and impure for too long. I am
serious.

--
dorayme
Oct 20 '06 #6

P: n/a
On Fri, 20 Oct 2006 01:35:11 +0100, dorayme wrote
(in article
<do**********************************@news-vip.optusnet.com.au>):
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>For the purists, you can of course do this with display: table-cell and
display: table and keep your HTML clean of layout information.

Please go on and give an example, I'd be all ears... I want to be
pure and good... I have been bad and impure for too long. I am
serious.
Purists tend to make me a bit nervous :)

--
Patrick
Brighton, UK

<http://www.patrickjames.me.uk>

Oct 20 '06 #7

P: n/a
Same goes for me :-)

Honestly, thanks for the information given by everyone; in the spirit
of CSS Zen Garden I wanted to avoid any tables in the HTML...

Thanks for the help,
Alex
patrick j wrote:
On Fri, 20 Oct 2006 01:35:11 +0100, dorayme wrote
(in article
<do**********************************@news-vip.optusnet.com.au>):
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
For the purists, you can of course do this with display: table-cell and
display: table and keep your HTML clean of layout information.
Please go on and give an example, I'd be all ears... I want to be
pure and good... I have been bad and impure for too long. I am
serious.

Purists tend to make me a bit nervous :)

--
Patrick
Brighton, UK

<http://www.patrickjames.me.uk>
Oct 20 '06 #8

P: n/a
On 2006-10-20, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>For the purists, you can of course do this with display: table-cell and
display: table and keep your HTML clean of layout information.

Please go on and give an example, I'd be all ears... I want to be
pure and good... I have been bad and impure for too long. I am
serious.
I've left out the unnecessary <tr>.

<head>
<style type="text/css">
div.container
{
display: table;
}
div.illustration, div.description
{
display: table-cell;
vertical-align: middle;
}
</style>
</head>

<body>
<div class="container">
<div class="illustration">
<img src="large-image.png">
</div>
<div class="description">
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
</div>
</div>
</body>
Oct 20 '06 #9

P: n/a
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2006-10-20, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
For the purists, you can of course do this with display: table-cell and
display: table and keep your HTML clean of layout information.
Please go on and give an example,

I've left out the unnecessary <tr>.

<head>
<style type="text/css">
div.container
{
display: table;
}
di
Yes, I see. Thanks Ben.

--
dorayme
Oct 20 '06 #10

P: n/a
In article
<11**********************@b28g2000cwb.googlegroups .com>,
"Alexander Fischer" <ha***********@hotmail.comwrote:
patrick j wrote:
On Fri, 20 Oct 2006 01:35:11 +0100, dorayme wrote
(in article
<do**********************************@news-vip.optusnet.com.au>):
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>
>For the purists, you can of course do this with display: table-cell and
>display: table and keep your HTML clean of layout information.
>
Please go on and give an example, I'd be all ears... I want to be
pure and good...
Purists tend to make me a bit nervous :)
Same goes for me :-)

Honestly, thanks for the information given by everyone; in the spirit
of CSS Zen Garden I wanted to avoid any tables in the HTML...
Well, the display:table will do you for this purpose (which by
the way, is a purpose of goodness and purity... so I hope you are
not making yourself too nervous.

[btw I reversed your (impure) top-posting so all my many readers
can follow every little thing that I am involved in to the nth
degree]

--
dorayme
Oct 20 '06 #11

This discussion thread is closed

Replies have been disabled for this discussion.