[RESOLVED] Center Align [Archive]

Click to See Complete Forum and Search --> : [RESOLVED] Center Align

Blazeix

07-26-2006, 08:23 AM

Hi. This shouldn't be too hard. I've read the CSS documentation at w3schools, and this just doesn't seem to work. I have a bar at the bottom of the screen, and I want to center text vertically on this bar.

#bar
{
position: absolute;
bottom: 0;
height:31;
width:100%;
}
#bartext
{
position: relative;
vertical-align:middle;
float:right;
height:31px;
width:10%;
font-family: tahoma;
color:white;
}

<div id="bar">
...
<div id="bartext">
Vertically Centered Text
</div>
</div>

It seems, from the css documentation, that 'vertical-align:middle' should do it, but it is still top aligned. What am I missing? Thanks.

WebJoel

07-26-2006, 08:42 AM

Is "vertical-align:middle;" even valid? It looks rather html4.0-ish to me...
Is this what you're trying to do?

#bar
{
position: absolute;
bottom: 0;
height:31px;
width:100%;
border:1px solid gray;
}
#bartext
{
position: relative;
margin: 0 auto;
text-align:center;
height:31px;
width:10%;
font-family: tahoma;
color:red;
border:1px solid gray;
}
</style>
</head>

<body>
<div id="bar">
...
<div id="bartext">
Vertically Centered Text
</div>
</div>
</body>
</html>

Blazeix

07-26-2006, 11:22 AM

That doesn't seem to be quite what I'm going for. text-align horizontally centers the text, right? I want to vertically center it. Here is the w3schools documentation of vertical-align (http://www.w3schools.com/css/pr_pos_vertical-align.asp). It seems like it should work, but it doesn't.

cyberphr

07-26-2006, 11:30 AM

kiwibrit

07-26-2006, 11:48 AM

Vertical-align notes (http://www.ibloomstudios.com/article6/).

Blazeix

07-26-2006, 12:25 PM

kiwibrit, thanks for the link, I was using it wrong. Now I'm using it how the article says, and it still isn't working.

<div style="background-color:red;height:200px"> 
<span style="vertical-align:middle"> 
Vertically Centered Text
</span>
</div>

This should work, shouldn't it?

kiwibrit

07-26-2006, 01:35 PM

A table cell

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p {vertical-align:middle}
table {height:220px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>UTest document</title>
</head>
<body>
<table width="200" border="0">
<tr>
<td><p>Let's have this vertically centered!</p></td>
</tr>
</table>
</body>
</html>

gives you the effect you want.

In CSS, things are rather different (http://www.safaribears.de/content.php?page=csstutorial&chap=8).

Personally, I usually use margins to give the text positioning I want within a div.

ray326

07-26-2006, 01:55 PM

bottom: 0;
height:31;
width:100%;Did you fix that height? Try setting the line-height in the footer to 31px.

Blazeix

07-26-2006, 04:00 PM

Yes, I fixed the height. I have an image that is 31px tall that is being repeated along the x axis. Is there any way to do it without a table? Shouldn't this work? It doesn't.

<html>
<head>
<style type="text/css">
span {position:relative;vertical-align:middle}
div {height:220px; background-color:red}
</style>
</head>
<body>
<div>
<span>Let's have this vertically centered!</span>
</div>
</body>
</html>

ray326

07-26-2006, 11:36 PM

Well, if you'd try line-height like I've been saying.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
span {line-height:220px}
div {height:220px; background-color:red}
</style>
</head>
<body>
<div>
<span>Let's have this vertically centered!</span>
</div>
</body>
</html>

Blazeix

07-27-2006, 08:29 AM

Thanks ray, that works. I tried messing with line-height after your post, but I wasn't sure if you meant anything special by 'footer.'

bokeh

07-27-2006, 08:36 AM

Is "vertical-align:middle;" even valid? It looks rather html4.0-ish to me...Perfectly valid. It is for use on inline elements and table cells. Since both a div and a float are block level it would not be valid in this context.