Re: [WSG] Align text vertically in a division
Rachel Radford wrote: Is there any other reliable way of mimicking the old-school valign for table layouts? I realy don't want to use hacky stuff or any javascript stuff cause already there is so much hacks just for IE!!! Unfortunately, no, there is no way without massive hacking. Bruno Fassino has discussed the problem, the technique is described here http://www.brunildo.org/test/img_center.html and the version for vertically centering a block is here http://www.brunildo.org/test/vertmiddle.html Sorry, can't provide a better alternative. Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Align text vertically in a division
Hello All, I am sure that you have described this issue thousand times before, but I cannot find the trick that will do this easily : how do you center text vertically in a division ? Easy to do with tables of course, but I would like to avoid using tables at all. euh ... as we say in French ... sorry if the question seems stupid. Pat ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Align text vertically in a division
[EMAIL PROTECTED] wrote: Hello All, I am sure that you have described this issue thousand times before, but I cannot find the trick that will do this easily : how do you center text vertically in a division ? Easy to do with tables of course, but I would like to avoid using tables at all. euh ... as we say in French ... sorry if the question seems stupid. Pat There is no such thing as a stupid question. However, there are often stupid answers, and this may be one of them: CenteringTextVertically-- css-d wiki. http://css-discuss.incutio.com/?page=CenteringTextVertically Regards, David Laakso -- David Laakso http://www.dlaakso.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Align text vertically in a division
Hi everyone, I'm replying to this because I am also stuck on the same issue. I have horizontal navigation that is floated (son of suckerfish style) and that has relative widths for scalable fonts. Some of the navigation text runs onto two lines, and some of them are short enough to be on one line. So problem is the one-liners are at the top of the navigation item and I would like them to be vertically centered. Can't use line-height trick because then the two liner nav items get massive line spacing! Menu is generated dynamically from CMS database so can't muck with the source code in any way. Is there any other reliable way of mimicking the old-school valign for table layouts? I realy don't want to use hacky stuff or any javascript stuff cause already there is so much hacks just for IE!!! Rach -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Laakso Sent: Wednesday, 10 August 2005 3:16 a.m. To: wsg@webstandardsgroup.org Subject: Re: [WSG] Align text vertically in a division [EMAIL PROTECTED] wrote: Hello All, I am sure that you have described this issue thousand times before, but I cannot find the trick that will do this easily : how do you center text vertically in a division ? Easy to do with tables of course, but I would like to avoid using tables at all. euh ... as we say in French ... sorry if the question seems stupid. Pat There is no such thing as a stupid question. However, there are often stupid answers, and this may be one of them: CenteringTextVertically-- css-d wiki. http://css-discuss.incutio.com/?page=CenteringTextVertically Regards, David Laakso -- David Laakso http://www.dlaakso.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Display: markerRE: [WSG] Align text vertically in a division
I wonder if the display:markers would be useful for this? Has anyone played around with it before? From what I understand, the display marker can be best understood when looking at a list item. The bullet is the marker and the list information is the block it is associated with. Could the text you are using be given display:marker and then given a position of top:50%? I haven't messed with this property and I don't know what the support is like. I can imagine a certain browser has no idea what I'm talking about. http://www.w3.org/TR/REC-CSS2/generate.html#markers Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rachel Radford Sent: Tuesday, August 09, 2005 3:13 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Align text vertically in a division Hi everyone, I'm replying to this because I am also stuck on the same issue. I have horizontal navigation that is floated (son of suckerfish style) and that has relative widths for scalable fonts. Some of the navigation text runs onto two lines, and some of them are short enough to be on one line. So problem is the one-liners are at the top of the navigation item and I would like them to be vertically centered. Can't use line-height trick because then the two liner nav items get massive line spacing! Menu is generated dynamically from CMS database so can't muck with the source code in any way. Is there any other reliable way of mimicking the old-school valign for table layouts? I realy don't want to use hacky stuff or any javascript stuff cause already there is so much hacks just for IE!!! Rach -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Laakso Sent: Wednesday, 10 August 2005 3:16 a.m. To: wsg@webstandardsgroup.org Subject: Re: [WSG] Align text vertically in a division [EMAIL PROTECTED] wrote: Hello All, I am sure that you have described this issue thousand times before, but I cannot find the trick that will do this easily : how do you center text vertically in a division ? Easy to do with tables of course, but I would like to avoid using tables at all. euh ... as we say in French ... sorry if the question seems stupid. Pat There is no such thing as a stupid question. However, there are often stupid answers, and this may be one of them: CenteringTextVertically-- css-d wiki. http://css-discuss.incutio.com/?page=CenteringTextVertically Regards, David Laakso -- David Laakso http://www.dlaakso.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Align text vertically in a division
Is there any other reliable way of mimicking the old-school
valign for table layouts?
I use a combination of display:table for those UA's that handle it, and a
relative/absolute positioning hack for those that don't:
.outer {
border: 1px solid #000;
display: table;
width: 200px;
height: 200px;
overflow: hidden;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
_width: 100%;
_position: absolute;
_top: 50%;
}
.inner span {
_position: relative;
_top: -50%;
}
div class=outer
div class=inner
spansome test text herespan
/div
/div
Regards
Scott Swabey
Lafinboy Productions
www.lafinboy.com
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Rachel Radford
Sent: Wednesday, 10 August 2005 8:13 AM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Align text vertically in a division
Hi everyone,
I'm replying to this because I am also stuck on the same issue.
I have horizontal navigation that is floated (son of
suckerfish style) and that has relative widths for scalable
fonts. Some of the navigation text runs onto two lines, and
some of them are short enough to be on one line. So problem
is the one-liners are at the top of the navigation item and I
would like them to be vertically centered. Can't use
line-height trick because then the two liner nav items get
massive line spacing! Menu is generated dynamically from CMS
database so can't muck with the source code in any way.
I realy don't want to use hacky
stuff or any javascript stuff cause already there is so much
hacks just for IE!!!
Rach
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED]
On Behalf Of David Laakso
Sent: Wednesday, 10 August 2005 3:16 a.m.
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Align text vertically in a division
[EMAIL PROTECTED] wrote:
Hello All,
I am sure that you have described this issue thousand times
before, but
I
cannot find the trick that will do this easily : how do you
center text vertically in a division ?
Easy to do with tables of course, but I would like to avoid using
tables at
all.
euh ... as we say in French ... sorry if the question seems
stupid. Pat
There is no such thing as a stupid question. However, there
are often
stupid answers, and this may be one of them:
CenteringTextVertically-- css-d wiki.
http://css-discuss.incutio.com/?page=CenteringTextVertically
Regards,
David Laakso
--
David Laakso
http://www.dlaakso.com/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
