Re: [css-d] How to centre text in a div
On 12/2/2007 at 4:28 PM, Clare [EMAIL PROTECTED] wrote: Hello! I have a general question about vertically aligning text within a div, I would just like to check which is the correct way to get this to happen. When I have a div say for example 50px high and I have a line of text within the div, I normally either use padding to get the text to appear roughly central or I set the line height to 50px. Is there an easier or more correct way to accomplish this? Regards, Clare Green. While CSS does not have a property for aligning horizontally, it does have a property for aligning vertically. Check vertical-align in the W3C property table at http://www.w3.org/TR/2004/CR-CSS21-20040225/propidx.html -- Ann __ css-discuss [EMAIL PROTECTED] 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] How to centre text in a div
At 11:44 AM -0700 12/3/07, Ann Randall wrote: While CSS does not have a property for aligning horizontally... Actually, it does, at least in this context: 'text-align', which will center the contents of each line of text within its line box. Therefore, assuming the line boxes to be as wide as the enclosing div, the text will be horizontally centered. (http://www.w3.org/TR/CSS21/text.html#alignment-prop) ...it does have a property for aligning vertically. Check vertical-align in the W3C property table at http://www.w3.org/TR/2004/CR-CSS21-20040225/propidx.html This won't help vertically center a line of text in a div, though it would help vertically center a line of text within any element whose 'display' is 'table-cell' (like table cells). There are a variety of techniques for vertically centering content, but most of them involve knowing ahead of time the height of the content. So it's fairly easy to vertically center an image, for example, but not necessarily text. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.com/) __ css-discuss [EMAIL PROTECTED] 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] How to centre text in a div
Hello! I have a general question about vertically aligning text within a div, I would just like to check which is the correct way to get this to happen. When I have a div say for example 50px high and I have a line of text within the div, I normally either use padding to get the text to appear roughly central or I set the line height to 50px. Is there an easier or more correct way to accomplish this? Regards, Clare Green. __ css-discuss [EMAIL PROTECTED] 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] How to centre text in a div
Clare wrote: Hello! I have a general question about vertically aligning text within a div, I would just like to check which is the correct way to get this to happen. When I have a div say for example 50px high and I have a line of text within the div, I normally either use padding to get the text to appear roughly central or I set the line height to 50px. Is there an easier or more correct way to accomplish this? Regards, Clare Green. This one method: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Best, ~dL PS Not a good idea to use px for line-height as it sometimes trips some browsers. Usually, no unit of measure is used with line-heght-- just a raw number such as 1.7;. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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/
