PDA

View Full Version : Vertically align text


blimp
06-13-2009, 04:46 AM
Can someone be so kind in helping me vertically aligning text in dreamweaver?

This is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vertically align text</title>



<style type="text/css">
<!--
#box {
height: 300px;
width: 600px;
background-color: #999;
text-align: center;
font-family: Verdana;
font-size: 36px;
}
-->
</style>
</head>

<body>

<div id="box">Vertically align text</div>
</body>
</html>

MagicPower
06-13-2009, 11:40 AM
i don't think you can do it in DW. My advice for you is you should design out your vertical text/word in photoshop, save it as an image png, bitmap or gif with the alpha transparency n then export it to DW. you may find another solution but vertical text alignment using CSS is kind of advanced. Good Luck

DWcourse
06-13-2009, 02:09 PM
For just one line of text:

V
E
R
T
I
C
A
L

Put a break between each letter and put it in a narrow div with set text-align set to center.

For multiple lines, I think you're stuck using a graphic.

blimp
06-14-2009, 11:45 AM
DWcourse, I was wanted to vertically align the text that appears in the header div.

I'm guessing there is no easy way of doing this?

d a v e
06-14-2009, 02:40 PM
what do you mean by vertically align? align it with what??

blimp
06-14-2009, 09:39 PM
Dave,

It's ok I've just worked it out.

I created a div tage call header. Set the box heigh to em instead of px and typed in HEADER. I then set the line-height to the same number (in em) as the box size.

code example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#header {
height: 2em;
background-color: #666;
font-family: Verdana, Geneva, sans-serif;
font-size: 100px;
line-height: 2em;
text-align: center;
color: #FFF;
}
-->
</style>
</head>

<body>
<div id="header">HEADER</div>
</body>
</html>

DWcourse
06-14-2009, 11:06 PM
:confused:

blimp
06-19-2009, 01:32 AM
Is this not a good way to do it DWcourse....? If not, then how would I go about it?

DWcourse
06-19-2009, 02:57 AM
It might be, I just don't have a clue what you were trying to do.

blimp
06-19-2009, 03:18 AM
DWcourse, does my post not make sense?

In dreamweaver I add a div box

<body>
<div id="box">TITLE</div>
</body>

I then style it

<style type="text/css">
#box {
height: 200px;
width: 300px;
text-align: center;
}
</style>

That should look like this when previewed in your browser

http://img291.imageshack.us/img291/2071/picture2yad.png

Now I'd like for the TITLE text to sit vertically and horizontally center

http://img19.imageshack.us/img19/1073/picture1zbm.png

I know how to make the text horizontally center, i add ext-align: center; to my style. How do I make it vertically center?

The only way I could make this happen was to set the height of the box to 15em and then give it a line-height of 15em

height: 15em;
width: 300px;
text-align: center;
line-height: 15em;

Is this the correct way of doing this?

DWcourse
06-19-2009, 04:53 AM
Actually that's a pretty good solution for a single line of type. Centering content vertically in a div is one of those things the CSS guys apparently didn't think of.

blimp
06-19-2009, 05:05 AM
DWcourse,

You've just uncovered something I didn't even realize.

So how do I do this if there are multiple lines of text?

Anyone......?

DWcourse
06-19-2009, 02:06 PM
I haven't used it but this seems to work: http://www.vdotmedia.com/blog/vertically-center-content-with-css/