CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

How can I center a div on a page?

Discuss How can I center a div on a page? in the CSS Help forum on Dev Shed.
How can I center a div on a page? Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old July 20th, 2004, 12:36 AM
bradles bradles is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2004
Posts: 90 bradles User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 7 h 17 m 26 sec
Reputation Power: 5
How can I center a div on a page?
I have a div sitting on a html page that will be included in the main page.

I include this page into a table and I would like the div to be centered horizontally inside the table cell. It isn't working for me at the moment. Am I doing something wrong?

Here is what I have so far:
Code:
#mybox{
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	padding: 5px;
	width: 400px;
	left-margin:auto;
	right-margin:auto;
}


Brad.
Reply With Quote
  #2  
Old July 20th, 2004, 12:40 AM
TheJim01's Avatar
TheJim01 TheJim01 is offline
Coconuts migrate?
Dev Shed Intermediate (1500 - 1999 posts)
  
Join Date: Feb 2004
Location: http://middle.nowhere.com
Posts: 1,895 TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)  Folding Points: 70160 Folding Title: Intermediate FolderFolding Points: 70160 Folding Title: Intermediate FolderFolding Points: 70160 Folding Title: Intermediate FolderFolding Points: 70160 Folding Title: Intermediate Folder
Time spent in forums: 2 Weeks 5 Days 11 h 8 m 20 sec
Reputation Power: 1176
Quote:
Originally Posted by bradles
I have a div sitting on a html page that will be included in the main page.

I include this page into a table and I would like the div to be centered horizontally inside the table cell. It isn't working for me at the moment. Am I doing something wrong?

Here is what I have so far:
Code:
#mybox{
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	padding: 5px;
	width: 400px;
	left-margin:auto;
	right-margin:auto;
}


Brad.



left-margin/right-margin should be reversed:
PHP Code:
 margin-left: auto;
margin-right: auto; 


__________________

Proud member of the T.S.N.B.U.F.L (tables should not be used for layout) alliance.

"Only use elements for their intended purpose. You wouldn't try to make coffee with a telephone, would you?" -Me
Reply With Quote
  #3  
Old July 20th, 2004, 12:53 AM
bradles bradles is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2004
Posts: 90 bradles User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 7 h 17 m 26 sec
Reputation Power: 5
It still doesn't work.

I think I'll just use tables. From my searches here and on google it looks like divs will be a PITA for what I am trying to do.

EDIT: Nope...this is a pain...I need to use a div because I want that nice thin border. Surely I should be able to center a div on a blank page.

This is the code I have:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">

body {
	text-align: center; /* for IE */
}

.bodytext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color : #000000;
}

#heading11 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color : #000000;
}


#mybox{
	margin: 0 auto;   /* align for good browsers */
	text-align: left; /* counter the body center */
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	padding: 5px;
	width: 400px;
}




</STYLE>
</head>

<body>

<div id="mybox">The quick brown dog jumps over the lazy fox.</div>

</body>
</html>
Reply With Quote
  #4  
Old July 20th, 2004, 06:49 AM
petersmart petersmart is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Location: Northamptonshire
Posts: 38 petersmart User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 12 m 14 sec
Reputation Power: 5
Send a message via AIM to petersmart Send a message via Yahoo to petersmart
Well I can't see the problem.

It centres itself in the middle of my browser at the top.

Do you mean you want it in the middle of the page or you want the text central in the box?
__________________
Tried and tested FREEBIES-4-YOU !!

http://www.freebies-4-you.com
Reply With Quote
  #5  
Old July 20th, 2004, 09:40 AM
loremipsum loremipsum is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2004
Location: Bristol UK
Posts: 29 loremipsum User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 34 m 48 sec
Reputation Power: 0
Gary's version always works for me...
Try this:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator"
    content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
    <meta http-equiv="content-type"
    content="text/html; charset=ISO-8859-1" />

    <title>Centering Horizontally</title>
<style type="text/css">
/*<![CDATA[*/

html, body, {
    margin: 0;
    padding: 0;
    text-align: center; /*for IE stupidity*/
    }

p {
    font-size: 1em;
    text-indent: 2em;
    }

#container {
    position: relative; /*The container must be positioned
                        /*in order to contain positioned
                        /*elements*/
    margin: 0 auto; /*This is the proper way to center an element*/
    width: 620px;
    border: 1px solid blue;
    text-align: left; /*corrects for IE hack*/
    padding: 1px;
    }

/*]]>*/
</style>
  </head>

  <body>
    <div id="container">
      <p>This division will be horizontally centered in the browser
      viewport. It can be used to hold the &ldquo;page.&rdquo; The
      container will stretch vertically according to the content.</p>
    </div>
    <!-- end container div -->
  </body>
</html>
Reply With Quote
  #6  
Old July 20th, 2004, 11:58 AM
TheJim01's Avatar
TheJim01 TheJim01 is offline
Coconuts migrate?
Dev Shed Intermediate (1500 - 1999 posts)
  
Join Date: Feb 2004
Location: http://middle.nowhere.com
Posts: 1,895 TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)  Folding Points: 70160 Folding Title: Intermediate FolderFolding Points: 70160 Folding Title: Intermediate FolderFolding Points: 70160 Folding Title: Intermediate FolderFolding Points: 70160 Folding Title: Intermediate Folder
Time spent in forums: 2 Weeks 5 Days 11 h 8 m 20 sec
Reputation Power: 1176
Yeah, I forgot to mention that the div's parent element needs to have "text-align: center;"

PHP Code:
<body style="text-align: center;">
  <div style="margin-left: auto; margin-right: auto; text-align: left;">
content content content
  </div>
</body> 


Oops.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > How can I center a div on a page?

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway. 
Stay green...Green IT