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 --
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
vBulletin® v3.7.3, Copyright ©2000-2013, Jelsoft Enterprises Ltd.