Text vertical align

Forum Moderators: open

Message Too Old, No Replies

Text vertical align

piskie

12:38 pm on Oct 8, 2002 (gmt 0)

I hope someone can help me.
I am tryimg to assign "vertical-align: middle" to text but getting nowhere.
Can this attribute be assigned to a class acting on text? If not how is best to verticly align text to middle (equal space above and below)within an absolute positioned div?

Nick_W

12:41 pm on Oct 8, 2002 (gmt 0)

Hmmm... never tried but here are some thoghts...

Put the text in a <p> and style that.

Try margin-top: auto; margin-bottom: auto;

or the same with padding?

Hope that's not too useless an answer ;)

Nick

piskie

1:24 pm on Oct 8, 2002 (gmt 0)

Thanks, but I've been there.
It is dificult to believe it can't be done, but I am running out of options and patience but I WILL NOT resort to a table.

lorax

1:29 pm on Oct 8, 2002 (gmt 0)

Well I've done it with <p> on a short - no wrapped line and applied margin-top and margin-bottom. It worked in my case because I knew exactly how tall my container was and fixed the size of my text. I'm NOT saying this is the best method though! :)

piskie

2:04 pm on Oct 8, 2002 (gmt 0)

Yes lorax if you know the number of lines of text and the height of each div it is a diferent matter.

I will have frequently changing paragraphs of text plus other variables so setting top and bottom margin each time is not a great improvement on mandraulic positioning.

Setting top and bottom margins to auto did not work either.

If I can get this sorted, updating page content will be much quicker and also any browser text re-sizing will be taken care of.

What's just as important is "No Tables"

SuzyUK

3:21 pm on Oct 8, 2002 (gmt 0)

this might work, although I'm not too sure if you require the absolute positioned div to remain a fixed height?

this will adjust the height according to how many lines of text you have

it works by wrapping the text in a seperate div...

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<style type="text/css"><!--

.div{
position: absolute;
top: 40px;
left: 100px;
width: 300px;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #009;
padding-top: 50px;
padding-bottom: 50px;
}

--></style>
</head>

<body>
<div class="div">
<div>
<p>sample text here</p>
<p>more text here</p>
<p>more text here</p>
<p>last line here</p>
</div>
</div>
</body>
</html>

:)
Suzy

moonbiter

4:36 pm on Oct 8, 2002 (gmt 0)

The problem you are having is a misunderstanding of the definition of vertical-align [w3.org]. The most important bit is this: "This property [vertical-align] affects the vertical positioning inside a line box of the boxes generated by an inline-level element." [emphasis added]

What vertical-align does is align the element with the style applied to it relative to other inline elements contained in the same line box [w3.org]. Applying vertical-align to a div has no effect on the contents of the div.

To further confuse matters, vertical-align has a different meaning in the case of table cells [w3.org]. Since this definition conforms more to what one expects out of vertical-align, it leads to an interesting hack (which, alas, only works in Mozilla):

div#yourDivId {
display: table-cell;
}

Will center the content of the element <div id="youDivId"></div> like you expect in Mozilla.

I have found inline formatting to be a confusing subject, and others have as well. Eric Meyer wrote a short essay [meyerweb.com] on the subject of inline formatting, which might help understanding a bit. AFAIK, there is no easy CSS way of vertically-aligning the content of a block element.

lorax

4:57 pm on Oct 8, 2002 (gmt 0)

Excellent moonbiter!

...now I gotta go back and fix a few things...

piskie

4:59 pm on Oct 8, 2002 (gmt 0)

Thank you moonbiter, that clears the muddy waters and explains some of the strange happenings during my experimentation.

I think I will resort to several <br> tags each time I change the content of each div.

Once again thamks for saving any more wasted time.

joshie76

4:35 pm on Oct 9, 2002 (gmt 0)

Very very nice post moonbiter. I'm sure that's set things straight for a lot of us.

Longhaired Genius

8:24 pm on Oct 9, 2002 (gmt 0)

Why not use a single-cell table if you want text vertically aligned to the middle of a box? Is there any other data associated with this text? Are you in fact trying to create a table with css? (Not a wise course of action IMHO.)

piskie

10:45 pm on Oct 9, 2002 (gmt 0)

I don't think I am trying to create a table with CSS. I am trying to get text to sit verticaly in the middle of a div. I am trying very hard to eliminate tables completely on this site and in the process create a very useful and flexible template.