PDA

View Full Version : Center in CSS


Sergio de la Torre
12-23-2005, 08:08 PM
I want to put a block in the middle of this page, but i dont know to do it.
http://www.sergiodelatorre.com/photoblog/index.php?x=templates

I cant know what will be the height or width...

Help!

blinking8s
12-23-2005, 08:10 PM
there are height and width tags...check the doc/ folders tag list file

you use something like
div class="title" style="<IMAGE_WDITH>"

or something along those lines

height isnt something you can easily control, just by knowing the dimensions that safely fit, and how well your footer breaks when this is pushed out of the picture, or overlaps...

Connie
12-24-2005, 12:06 PM
I want to put a block in the middle of this page, but i dont know to do it.

<div align="center"> does not help?

Sergio de la Torre
12-24-2005, 01:06 PM
Vertical centering :) Horizontal is easy to do

Connie
12-24-2005, 01:14 PM
try CSS with:

margin-top:auto;margin-bottom:auto

that might help!

blinking8s
12-24-2005, 03:51 PM
just google it

'centering with css' or 'center content css' or something, you will find more than enough help

Wearefive
12-26-2005, 10:18 PM
This will work for a centred box however is you need to virtically center the box as well you will need another approach. The outer container will be full width and the box 200px square. The text-align:left will correct the text-align:center inherited from the outer container.

<div id="container" style="text-align:center;">
<div id="box" style="width:200px;height:200px;text-align:left;">
[content]
</div>
</div>

Hope this helps.

Michael.

Wearefive
12-26-2005, 10:30 PM
This is the best and 100% cross platform horizontal and vertically centred box model I've found so far. Works with IE/WIN, FIREFOX/WIN, IE/MAC, FIREFOX/MAC, SAFARI/MAC... It even works on IE/Mac Classic (Mac OS 9).

-- START --

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS - Vertically Centered Box</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
margin:0px;
}
#outerContainer {
position:relative;
height:50%;
border:solid #F00 1px;
}
#theBox {
position:absolute;
left:50%;
bottom:-25px;
width:100px;
height:50px;
border:solid #000 1px;
margin-left:-50px;
}
</style>
</head>
<body>

<div id="outerContainer">
<div id="theBox"></div>
</div>

</body>
</html>

-- END --

GeoS
12-28-2005, 06:42 AM
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

blinking8s
12-28-2005, 11:37 AM
bet you i can figure out 31 flavours with google ;)

Sergio de la Torre
12-29-2005, 10:04 PM
I cant find a real solution.... :(

Thanks

Connie
12-30-2005, 07:50 AM
margin-top:auto;
margin-bottom:auto;

is your friend