[css-d] vertical centering of multi-line text
In this page: http://www.redkitecreative.com/projects/fink/expertise.php I'm using display: table-cell and vertical-align for the paragraph text to the right of each thumbnail image, but this isn't working in Safari/Win; the p/p is floated all the way left and the thumbnail is displayed below the div. I can't use line-height as a way to center because one of the paragraph elements has two lines. Can someone help? -- Debbie Campbell __ 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] vertical centering of multi-line text
2009/6/8 Debbie Campbell d...@redkitecreative.com http://www.redkitecreative.com/projects/fink/expertise.php I'm using display: table-cell and vertical-align for the paragraph text to the right of each thumbnail image, but this isn't working in Safari/Win; the p/p is floated all the way left and the thumbnail is displayed below the div. Debbie, I don't have Safari Win, but what if the p gets a width? Ingo __ 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] vertical centering of multi-line text
Debbie Campbell wrote:
In this page:
http://www.redkitecreative.com/projects/fink/expertise.php
I'm using display: table-cell and vertical-align for the paragraph text
to the right of each thumbnail image, but this isn't working in
Safari/Win; the p/p is floated all the way left and the thumbnail is
displayed below the div.
I can't use line-height as a way to center because one of the paragraph
elements has two lines. Can someone help?
Umm. Don't exactly know. Maybe???:
.content-list-block p {border: 1px solid red;
/*margin: 0;*/ margin: 0;padding-top: 18px;
/*padding: 0;*/
font-weight: bold;
font-size: 1.1em;
display:table; line-height: 1;
/*height: 54px;*/
/*line-height: 1.3em;*/
/*display: table-cell;vertical-align: middle;*/
}
Please see: http://chelseacreekstudio.com/ca/cssd/link.htm
__
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] vertical centering of multi-line text
That works - thank you very much!
--
Debbie Campbell
Web Developer
Red Kite Creative LLC
d...@redkitecreative.com
www.redkitecreative.com
(970) 372-2125
David Laakso wrote:
Debbie Campbell wrote:
In this page:
http://www.redkitecreative.com/projects/fink/expertise.php
I'm using display: table-cell and vertical-align for the paragraph
text to the right of each thumbnail image, but this isn't working in
Safari/Win; the p/p is floated all the way left and the thumbnail
is displayed below the div.
I can't use line-height as a way to center because one of the
paragraph elements has two lines. Can someone help?
Umm. Don't exactly know. Maybe???:
.content-list-block p {border: 1px solid red;
/*margin: 0;*/ margin: 0;padding-top: 18px;
/*padding: 0;*/
font-weight: bold;
font-size: 1.1em;
display:table; line-height: 1;
/*height: 54px;*/
/*line-height: 1.3em;*/
/*display: table-cell;vertical-align: middle;*/
}
Please see: http://chelseacreekstudio.com/ca/cssd/link.htm
__
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] vertical centering of multi-line text
On 9/06/2009, at 8:40 AM, David Laakso wrote:
Debbie Campbell wrote:
In this page:
http://www.redkitecreative.com/projects/fink/expertise.php
I'm using display: table-cell and vertical-align for the paragraph
text
to the right of each thumbnail image, but this isn't working in
Umm. Don't exactly know. Maybe???:
.content-list-block p {border: 1px solid red;
/*margin: 0;*/ margin: 0;padding-top: 18px;
/*padding: 0;*/
font-weight: bold;
font-size: 1.1em;
display:table; line-height: 1;
/*height: 54px;*/
/*line-height: 1.3em;*/
/*display: table-cell;vertical-align: middle;*/
}
Please see: http://chelseacreekstudio.com/ca/cssd/link.htm
Another option is inline-block...
.content-list-block img {
display: -moz-inline-box; /* only for FF2 backwards
compatibility */
display: inline-block; /* change display */
float: none; /* remove float as is forces display:
block. Not
required if it's inline-block. */
margin-right: 10px; /* Might as well be pixels if the
container is */
vertical-align: middle; /* set vertical align */
}
.content-list-block p {
display: -moz-inline-box; /* only for FF2 backwards
compatibility */
display: inline-block; /* change display */
padding-top: 0; /* reset padding */
padding-bottom: 0;
vertical-align:middle; /* set vertical align */
width: 210px; /* Set a width to your inline-block. */
}
You can make inline-block work in IE8 by setting display to inline
and forcing hasLayout (in IE only stylesheet. e.g.
.content-list-block p, .content-list-block img { display: inline;
zoom: 1; }
See: http://snadden.com/sandbox/expertise.html
Cheers, Tim
__
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/
