CSS - Vertical / Horizontal Centering

plusonetwo · #1 11-28-2002, 01:38 PM

Hi all...

I need some help, if possible, and this seems like the right forum to post in.

I'd like to have a graphic and text (in a table) center vertically and horizontally in the browser window. With HTML, I'd normally use the width and height attributes (set at 100%) in a master <TABLE> to do this but XHTML no longer recognizes the height attrib. Any ideas on how to use CSS to now do this?

Thanks,

- Michael H.

Stefan · #2 11-28-2002, 03:12 PM

No <table> needed...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Hor & Vert Center</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style title="Default" media="screen" type="text/css">
#center {width:200px; height:100px; position:absolute; top:50%; left:50%; margin:-50px auto auto -100px; border:1px solid black; text-align:center;}
</style>
</head>
<body>

<div id="center">
Your centered box.
</div>

</body>
</html>

plusonetwo · #3 11-28-2002, 08:37 PM

Hi Stefan...

Thanks for your help. It wasn't exactly the solution I was looking for but did get me on the right track. Here's what I have so far. I've removed some irrelevant code for this post.

<style type="text/css">

body {
margin:0;
padding:0;
color: #33cccc;
}

.hold {
position: absolute;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}

</style>
</head>

<body>
<div class="hold" align="center"><img src="brand_cov01.gif" alt="Green Cover" name="brandcov" id="brandcov" width="147" height="313" border="0" align="middle"></div>
</body>
</html>

Everything almost works as it's supposed to. The image I have in the div tag is centered horizontally but not vertically. Rather, it's aligned to the top center of the browser window. My overall goal was to have it in the center of a browser window no matter how wide or narrow, etc. Ideas on how to have it vertically in the middle?

Thanks again,

- Michael

Stefan · #4 11-28-2002, 08:48 PM

Quote:

Originally posted by plusonetwo
My overall goal was to have it in the center of a browser window no matter how wide or narrow, etc. Ideas on how to have it vertically in the middle?

I have already give the code for exactly that in this thread.

plusonetwo · #5 11-28-2002, 09:38 PM

Alright... I don't understand XHTML all too clearly yet so bear with me. Your code does work correctly when I copy/paste, however, when I change out what's inside the DIV tag, such as with a graphic, what, if anything, do I have to adjust elsewhere. I say this because, for instance, I put a 349x313 graphic in the DIV and it was pushed off the right side of the browser a bit.

Thanks,

- Michael

plusonetwo · #6 11-28-2002, 09:48 PM

Hmm... never mind. Got the solution in the #center style tag. Thanks, though.

- Michael

Stefan · #7 11-29-2002, 03:38 AM

Quote:

Originally posted by plusonetwo
[b]Alright... I don't understand XHTML all too clearly yet so bear with me.

Sorry, didn't think it would cause a problem since it's almsot exatly the same as HTML 4.01.
Just for referance here is a how it would look in "normal" HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style title="Default" media="screen" type="text/css">
#center {width:200px; height:100px; position:absolute; top:50%; left:50%; margin:-50px auto auto -100px; border:1px solid black; text-align:center;}
</style>
</head>
<body>

<div id="center">
Your centered box.
</div>

</body>
</html>

Quote:

Your code does work correctly when I copy/paste, however, when I change out what's inside the DIV tag, such as with a graphic, what, if anything, do I have to adjust elsewhere. I say this because, for instance, I put a 349x313 graphic in the DIV and it was pushed off the right side of the browser a bit.

Yes, the values in the #center has to be changed depending on the size of the content you put in there.
If you only work with inline content, like plain text and images you could also use the shorter CSS (since text-align:center; will center it horizontally anyway)

#center {width:100%; height:313px; position:absolute; top:50%; left:0; margin:-157px auto auto; border:1px solid black; text-align:center;}

(also adapted it to the image height, in this case 313px)

allier · #8 12-02-2002, 03:15 PM

To acheive what I anderstand you want to do, you should combine absolute and relative positioning like :

<div align="center"><div id="layer33" style="position: relative; left: 0px; width: 826px; height: 136px;">
<div id="Layer39" style="position: absolute; left: 0px; width: 276px; background: #993399; height: 136px;">

...</div></div>

HTH

Stefan · #9 12-02-2002, 05:45 PM

Quote:

Originally posted by allier
To acheive what I anderstand you want to do, you should combine absolute and relative positioning like :

<div align="center"><div id="layer33" style="position: relative; left: 0px; width: 826px; height: 136px;">
<div id="Layer39" style="position: absolute; left: 0px; width: 276px; background: #993399; height: 136px;">

...</div></div>

HTH

What would be the advantage of this code vs what is already in this thread?

To me it doesn't even seem to be close to what the original posted asked for.
Are you perhaps forgetting to include the CSS attached with the ID attributes?

allier · #10 12-03-2002, 02:28 AM

Quote:

What would be the advantage of this code vs what is already in this thread?

The advantage of a position: relative then a position: absolute is that you can put this layers, anyware in your page,not depending of the height of what is above .

Stefan · #11 12-03-2002, 06:25 AM

Quote:

Originally posted by allier
The advantage of a position: relative then a position: absolute is that you can put this layers, anyware in your page,not depending of the height of what is above .

Wouldn't that be a disadvantage in this case, considering the original poster wanted something hor & vert centered on the screen.

With other content above it, first relative positioning will not make your content vertically centerd on screen.

I also see other pontential problems with your code example eg width: 826px. That will give a horizontal scrollbar at all resolutions <1024px

vernes · #12 07-10-2006, 08:13 AM

The first example of Stefan works... untill you shrink the browser window beyond the size of the DIV size.
The DIV will be kept centered causing the TOP of the DIV to move upward.

I'd like to know how I can keep the DIV from moving beyond the top boundry of the browserwindow.

WebMaister · #13 08-31-2006, 11:39 AM

me too!

asterix · #14 12-01-2006, 08:40 PM

I recently wrote an article on this - CSS Vertically and Horizontally Center - does that solve your problem?

mark_yieh · #15 12-12-2006, 01:12 AM

Quote:

The first example of Stefan works... untill you shrink the browser window beyond the size of the DIV size.
The DIV will be kept centered causing the TOP of the DIV to move upward.

min-width and min-height

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)