Align text at bottom

Senior WebHelper Joined: 21 Apr 2003 Posts: 153

It there a way to put text at the bottom of a page, like you can center text horizontaly but can you put it at the bottom vertically.

Posted: Wed May 07, 2003 10:38 pm (20 years, 11 months ago)

Yes. (If you're using CSS then it's easy) Put the following code in your page:

Code:

<div class="bottom">Some stuff to go at the bottom of my page</div>

Then in your stylesheet (or inline style declaration), put:

Code:

div.bottom {position: absolute; bottom: 0px;}

Senior WebHelper Joined: 21 Apr 2003 Posts: 153

First I have this code and it doesnt center it horizontaly, it is off to the right.

Code:

<center>
<div class="bottom">HTTP 404 - File not found
</div>
</center>

Second is there any way to center somthing vertically?

Team Member Joined: 06 Jan 2002 Posts: 2564

Code:

div.bottom { position: absolute; bottom: 0px; text-align: center }

should do it. I don't know a way of centering vertically without a script (and no, I don't know of a script either Razz

). Something to remember is that the code above, AFAIK, always puts the text at the bottom of the window, so if your page is quite long, the text won't appear at the end, but in the middle.

Posted: Thu May 08, 2003 12:59 pm (20 years, 11 months ago)

This a complete CSS method of centring a box both horizontally and vertically:

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>

<title>CSS Centre by Robert</title>
<style type="text/css">
body
{
color: white;
background-color: black;
margin: 0px;
padding:0px;
height: 100%;
}
#line
{
border-bottom : 1px dotted #FFF;
border-top : 1px dotted #FFF;
color: white;
background-color: white;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}

#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: white;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible;
border : 3px dotted #FFF; color: green;
}
</style>
</head>

<body>
<div id="line">
<div id="content">
<br />
Centred Box
<br />
</div>
</div>
</body>
</html>

Senior WebHelper Joined: 21 Apr 2003 Posts: 153

Look in the left frame of www.stingbaseball.org where it says "Page design and coding by Kirk Robinson", how can I get that centered it the frame?

Posted: Tue May 20, 2003 11:43 am (20 years, 11 months ago)

The simple solution using absolute positioning would be to supply the <div> box with a width and position it at 50% horizontal then use a negative value for margin-left exactly halve the value of the full division box width thus the text is pushed back left by 100px thus giving the illusion of a centred text, for example:

Code:

.bottom {
position: absolute;
left: 50%;
width: 200px;
bottom: 0;
margin-left: -100px;
}

You may also want to add text-align: center; since the above moves the box.