Re: [css-d] Vertically centering text in a paragraph
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/
[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/
Re: [css-d] Vertically centering text in a paragraph
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 t...@ramasaig.com To: css-d@lists.css-discuss.org 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/
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 br / 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 t...@ramasaig.com To: css-d@lists.css-discuss.org 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
On Mon, Apr 13, 2009 at 3:45 AM, Tim Dawson t...@ramasaig.com mailto:t...@ramasaig.com 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 br / 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
On Mon, Apr 13, 2009 at 3:45 AM, Tim Dawson t...@ramasaig.com 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
andree hollander wrote: On 2009-04-13, at 13:03, Tim Dawson wrote: I'll explore putting the text into a span. Meanwhile the br / 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=1uri=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
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
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 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 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
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
-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
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
Venditelli, Daniel - Web Development Administrator wrote: Just keep in mind that if you do use br/ then your layout won't hold up as soon as someone uses their browser settings to increase the font-size Yes, the br / 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/
