Re: [css-d] Vertically centering text in a paragraph

[Tim Dawson]

Jonny Stephens wrote:
> On Apr 13, 2009, at 9:45 AM, Tim Dawson wrote:
> 
>> I'm working on a site which has several images on the page (300x225px).
>> Each image has some descriptive text alongside, which generally is not as 
>> high as the image.  My client would like the text vertically centred on the
>> image.
>> 
>> http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php
>> 
> 
> Here's a method that may work where the elements have minimal styling: 
> http://bloog.co.uk/3rd/mull/vertical.html
> 
Thanks, Jonny, it seems a lot less complicated than some solutions I've seen.
I'll give it a go

Tim

-- 
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Tim Dawson]

Venditelli, Daniel - Web Development Administrator wrote:
>  
> Just keep in mind that if you do use  then your layout won't hold up
> as soon as someone uses their browser settings to increase the font-size

Yes, the  is only a stop-gap to show the client.
It doesn't appear that there's any simpler solution than to fall back on tables.

Tim

-- 
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Gunlaug Sørtun]

>> does IE support display:table or display:table cell though? I could
>> have sworn it didn't.

- IE7 and older does not support CSS table.
- IE8 does support CSS table as well as any other browser - when in full
"standards mode".

Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Brian Hazelton]

does IE support display:table or display:table cell though? I could have
sworn it didn't.


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Tim Dawson]

Brian Hazelton wrote:
> does IE support display:table or display:table cell though? I could have
> sworn it didn't.

Georg has a long article on this, on his web site, and he says it doesn't.

Tim

-- 
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Ian Young]

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> boun...@lists.css-discuss.org] On Behalf Of Tim Dawson
> Sent: 13 April 2009 09:46
> To: css-d@lists.css-discuss.org
> Subject: [css-d] Vertically centering text in a paragraph
> 
> I'm working on a site which has several images on the page (300x225px).
> Each
> image has some descriptive text alongside, which generally is not as
> high as the
> image.  My client would like the text vertically centred on the image.
> 
> http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php
> 
> CSS deliberately seems to avoid a v-align capability in paragraphs.  I
> realise I
> could introduce padding, but that would have to be tailored for every
> piece of
> text. Tables allow v-align in cells, I know, but I don't want to go
> that route
> either  Is there a better way, please ?
> 

Hi Tim

This has been in discussion a few times.
Here is the link that will help you.
http://www.mondiara.com/graphics/valign.html

It is based on display:table and display:table-cell where your div acts like
a table.
Follow the CSS in the example and you will find all you need.

Cheers

Ian
Iyesolutions.co.uk

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Venditelli, Daniel - Web Development Administrator]

 
Just keep in mind that if you do use  than you layout won't hold up
as soon as someone with slightly older eyes uses their browser settings
to increase the font-size even a single step where-as the table MAY hold
up a little better.

Or, if you're not worried about that, keep a note somewhere so when your
client's much older aunt or uncle checks out the site and things aren't
lining up, you'll immediately know why. ;)


-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim Dawson
Sent: Monday, April 13, 2009 3:13 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Vertically centering text in a paragraph

Thanks, Bob.  I know it's possible to take table-aversion too far, and
you are 
right in saying the information is essentially tabular.  I'll look into
it.

Meanwhile I'm using a varying number of  which has the merit of
being very 
simple to insert.  Provided the content is fairly static, it's not much
trouble 
to maintain, either.  Not good semantically, of course, and I'm sure
I'll have 
the standardistas after me.

Tim

designer wrote:
> Tim:  I know you said that you didn't want to go the table way, but a
table 
> in this case is perfectly acceptable, insofar as the relationship
between 
> the image and text is a tabular one. I wouldn't hesitate to use a
table 
> here, so long as it's marked up properly.
> 
> Bob
> 
> 
> - Original Message - 
> From: "Tim Dawson" 
> To: 
> Sent: Monday, April 13, 2009 9:45 AM
> Subject: [css-d] Vertically centering text in a paragraph
> 
> 
>> I'm working on a site which has several images on the page
(300x225px). 
>> Each
>> image has some descriptive text alongside, which generally is not as
high 
>> as the
>> image.  My client would like the text vertically centred on the
image.
>>
>> http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php
>>
>> CSS deliberately seems to avoid a v-align capability in paragraphs.
I 
>> realise I
>> could introduce padding, but that would have to be tailored for every

>> piece of
>> text. Tables allow v-align in cells, I know, but I don't want to go
that 
>> route
>> either  Is there a better way, please ?
>>
>> Tim Dawson
>>
>> -- 
>> Tim Dawson
>> Maolbhuidhe
>> Fionnphort
>> Isle of Mull  PA66 6BP
>>
>> 01681 700718
>>
__
>> css-discuss [cs...@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>>
> 
> 
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 

-- 
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Tim Dawson]

Brian Hazelton wrote:
> sorry, that was bad information.
> 
Thanks for trying, anyway (I got both your e-mails).

It seems it's one of those apparently small problems that require sledge-hammer 
treatment to achieve in CSS.

Regards,

Tim

-- 
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Brian Hazelton]

sorry, that was bad information. I just tried it and while it does make
it vertically centered, it adds huge space because of the line height.


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Brian Hazelton]

You can apply a class to the paragraphs that are together and make the
line height the same as the height of the image and then st
vertical-align to middle.


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Tim Dawson]

andree hollander wrote:
> 
> On 2009-04-13, at 13:03, Tim Dawson wrote:
> 
>>  I'll explore putting the text into a span.  Meanwhile the  
>> solution
>> (forcing the text down the para), while not good semantically, is 
>> quick and
>> flexible, particularly if the clients change their mind when they see 
>> the result.
> 
> Bad idea:
I know, that's why I'm here looking for a better solution.  It still works in 
IE7 (and FF3 and Opera) meanwhile, so I can show the client the effect.
> 
> Also note
> http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mull-bed-and-breakfast.co.uk%2Fnewcrofts%2Fwildlife.php
>  
> No Character Encoding Found!
Thank you for pointing this out.

Tim

-- 
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Tim Dawson]

> On Mon, Apr 13, 2009 at 3:45 AM, Tim Dawson  > wrote:
> 
> I'm working on a site which has several images on the page
> (300x225px).  Each
> image has some descriptive text alongside, which generally is not as
> high as the
> image.  My client would like the text vertically centred on the image.
> 
> http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php
> 
> CSS deliberately seems to avoid a v-align capability in paragraphs.
>  I realise I
> could introduce padding, but that would have to be tailored for
> every piece of
> text. Tables allow v-align in cells, I know, but I don't want to go
> that route
> either  Is there a better way, please ?
> 
> Tim Dawson
> 
> 
> I just woke up, so roll with me here.
> 
> How about wrapping each image/text in a div/p combination. Since images 
> are inline elements, this should technically be the more semantic way of 
> doing it.
> 
> By wrapping the text inside a span, you should be able to open yourself 
> up to using the vertical-align property of CSS. 
> 
> -- 
> -Jack Timmons
> http://www.trotlc.com
> Twitter: @codeacula

Thanks, Jack.  My image/text are already in div/p combinations, as you suggest.
  I'll explore putting the text into a span.  Meanwhile the  solution
(forcing the text down the para), while not good semantically, is quick and
flexible, particularly if the clients change their mind when they see the 
result.

Tim
-- 
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Jack Timmons]

On Mon, Apr 13, 2009 at 3:45 AM, Tim Dawson  wrote:

> I'm working on a site which has several images on the page (300x225px).
>  Each
> image has some descriptive text alongside, which generally is not as high
> as the
> image.  My client would like the text vertically centred on the image.
>
> http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php
>
> CSS deliberately seems to avoid a v-align capability in paragraphs.  I
> realise I
> could introduce padding, but that would have to be tailored for every piece
> of
> text. Tables allow v-align in cells, I know, but I don't want to go that
> route
> either  Is there a better way, please ?
>
> Tim Dawson


I just woke up, so roll with me here.

How about wrapping each image/text in a div/p combination. Since images are
inline elements, this should technically be the more semantic way of doing
it.

By wrapping the text inside a span, you should be able to open yourself up
to using the vertical-align property of CSS.

-- 
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[Tim Dawson]

Thanks, Bob.  I know it's possible to take table-aversion too far, and you are 
right in saying the information is essentially tabular.  I'll look into it.

Meanwhile I'm using a varying number of  which has the merit of being 
very 
simple to insert.  Provided the content is fairly static, it's not much trouble 
to maintain, either.  Not good semantically, of course, and I'm sure I'll have 
the standardistas after me.

Tim

designer wrote:
> Tim:  I know you said that you didn't want to go the table way, but a table 
> in this case is perfectly acceptable, insofar as the relationship between 
> the image and text is a tabular one. I wouldn't hesitate to use a table 
> here, so long as it's marked up properly.
> 
> Bob
> 
> 
> - Original Message - 
> From: "Tim Dawson" 
> To: 
> Sent: Monday, April 13, 2009 9:45 AM
> Subject: [css-d] Vertically centering text in a paragraph
> 
> 
>> I'm working on a site which has several images on the page (300x225px). 
>> Each
>> image has some descriptive text alongside, which generally is not as high 
>> as the
>> image.  My client would like the text vertically centred on the image.
>>
>> http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php
>>
>> CSS deliberately seems to avoid a v-align capability in paragraphs.  I 
>> realise I
>> could introduce padding, but that would have to be tailored for every 
>> piece of
>> text. Tables allow v-align in cells, I know, but I don't want to go that 
>> route
>> either  Is there a better way, please ?
>>
>> Tim Dawson
>>
>> -- 
>> Tim Dawson
>> Maolbhuidhe
>> Fionnphort
>> Isle of Mull  PA66 6BP
>>
>> 01681 700718
>> __
>> css-discuss [cs...@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>>
> 
> 
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 

-- 
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically centering text in a paragraph

[designer]

Tim:  I know you said that you didn't want to go the table way, but a table 
in this case is perfectly acceptable, insofar as the relationship between 
the image and text is a tabular one. I wouldn't hesitate to use a table 
here, so long as it's marked up properly.

Bob


- Original Message - 
From: "Tim Dawson" 
To: 
Sent: Monday, April 13, 2009 9:45 AM
Subject: [css-d] Vertically centering text in a paragraph


>
> I'm working on a site which has several images on the page (300x225px). 
> Each
> image has some descriptive text alongside, which generally is not as high 
> as the
> image.  My client would like the text vertically centred on the image.
>
> http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php
>
> CSS deliberately seems to avoid a v-align capability in paragraphs.  I 
> realise I
> could introduce padding, but that would have to be tailored for every 
> piece of
> text. Tables allow v-align in cells, I know, but I don't want to go that 
> route
> either  Is there a better way, please ?
>
> Tim Dawson
>
> -- 
> Tim Dawson
> Maolbhuidhe
> Fionnphort
> Isle of Mull  PA66 6BP
>
> 01681 700718
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> 


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Vertically centering text in a paragraph

[Tim Dawson]

I'm working on a site which has several images on the page (300x225px).  Each 
image has some descriptive text alongside, which generally is not as high as 
the 
image.  My client would like the text vertically centred on the image.

http://www.mull-bed-and-breakfast.co.uk/newcrofts/self-catering.php

CSS deliberately seems to avoid a v-align capability in paragraphs.  I realise 
I 
could introduce padding, but that would have to be tailored for every piece of 
text. Tables allow v-align in cells, I know, but I don't want to go that route 
either  Is there a better way, please ?

Tim Dawson

-- 
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/