Pixelpost Forum - Center in CSS

Page 1 of 2

Show 40 post(s) from this thread on one page

Pixelpost Forum (http://www.pixelpost.org/forum/index.php)

- Template design and Front-End Code (http://www.pixelpost.org/forum/forumdisplay.php?f=20)

- - Center in CSS (http://www.pixelpost.org/forum/showthread.php?t=3000)

Sergio de la Torre

12-23-2005 08:08 PM

Center in CSS

I want to put a block in the middle of this page, but i dont know to do it.
http://www.sergiodelatorre.com/photo...hp?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

Quote:

Originally Posted by Sergio de la Torre

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

Center box CSS

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

Horizontal and Vertically Centred box model

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-ver...-solution.html

blinking8s

12-28-2005 11:37 AM

bet you i can figure out 31 flavours with google ;)

All times are GMT. The time now is 11:26 AM.

Page 1 of 2

Show 40 post(s) from this thread on one page