Hi all,
I would like to center something to the middle of web page (vertically and horizontally). How can this be done using CSS?
Thanks in advance.
How to center?
-
- Posts: 161
- Joined: November 6th, 2002, 3:53 am
- Location: Slovenia
- Contact:
How to center?
Live long and prosper!
- nilson
- Posts: 4100
- Joined: February 15th, 2003, 11:55 pm
- Location: Tuscaloosa, Alabama
- Contact:
If it's text or an inline image, just use "text-align: center", but if its a table, you'll have to use auto-width margins. You can find out more about it at http://www.bluerobot.com/. As for the vertically centering, I don't think that it's posibble using CSS, but again you can find out more about it at the above website.
Last edited by nilson on June 8th, 2003, 12:40 am, edited 1 time in total.
-
- Posts: 252
- Joined: November 18th, 2002, 11:59 am
- Location: Tallinn, Estonia
- Contact:
If it's an element with known size then its easy - just set its position to absolute, left and right to 50% and margin-top and margin-left to minus half of its height and width. For example, if you have 200x200px image, then set
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
If you don't know the size beforehand then you can center horizontally setting
margin-right: auto;
margin-left: auto;
AFAIK you can't currently center vertically with pure CSS, unless you know object size. I'd be glad to be corrected in this matter though.
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
If you don't know the size beforehand then you can center horizontally setting
margin-right: auto;
margin-left: auto;
AFAIK you can't currently center vertically with pure CSS, unless you know object size. I'd be glad to be corrected in this matter though.
-
- Posts: 683
- Joined: April 20th, 2003, 1:53 pm
- Location: GB
- Contact:
-
- Posts: 252
- Joined: November 18th, 2002, 11:59 am
- Location: Tallinn, Estonia
- Contact:
- WillyWonka
- Posts: 212
- Joined: November 5th, 2002, 12:25 pm
- Location: Toronto
- Contact:
-
- Posts: 399
- Joined: March 18th, 2003, 9:52 pm
- Contact:
Code: Select all
<html>
<head><title>Center</title></head>
<body>
<table style="width:100%;
height:100%;
border:1px solid black;
table-layout:fixed">
<tr>
<td></td>
<td style="border:1px solid black">
<center>
<div style="border:1px solid black;
width:50%;">
this box is in the center
<br><br><br><br><br>
yes always
<br><br><br><br><br>
both on Moz & IE.
</div>
</center>
</td>
<td></td>
</tr>
</table>
</body>
</html>
(Works on both IE & Moz)
Edit: Another Method to centerlize by michaell at http://forums.mozillazine.org/viewtopic ... 6708#96708
8) Biju
MacroEditor | http://QuickTools.MozDev.org | Edit files inside ZIP,JAR,XPI http://7-Zip.org
Cure Cancer http://www.grid.org/about | GNOME,*nix on MSWin32 http://CyGNOME.sf.net
MacroEditor | http://QuickTools.MozDev.org | Edit files inside ZIP,JAR,XPI http://7-Zip.org
Cure Cancer http://www.grid.org/about | GNOME,*nix on MSWin32 http://CyGNOME.sf.net