Center a DIV within another DIV with CSS

Hey all,

I have a header DIV that contains a logo DIV.  The logo DIV is all the way to the left.  How can I center the logo DIV within the header DIV?

Note:
Fluid layout
IE8
Drupal 7

Thanks in advance!
Modifier1000Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Kim WalkerConnect With a Mentor Web Programmer/TechnicianCommented:
Actually, the text-align should be applied to the parent div.
<style type="text/css">
<!--
#header #logo {
	margin-right: auto;
	margin-left: auto;
	width: 300px;
	background-color: #66FF00;
}
#header {
	background-color: #66CC00;
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
}
-->
</style>

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
The best way to center a div is to set it's left and right margin to "auto."
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
By the way, that doesn't work in IE. You'll also have to give the parent div a text-align: center; in IE.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
HagayMandelConnect With a Mentor Commented:
A working sample:

The CSS
<style type="text/css">
<!--
#header #logo {
	margin-right: auto;
	margin-left: auto;
	width: 300px;
	background-color: #66FF00;
	text-align: center;
}
#header {
	background-color: #66CC00;
	padding-top: 12px;
	padding-bottom: 12px;
}
-->
</style>

Open in new window


The HTML

<div id="header">
  <div id="logo">logo div content</div>
</div>

Open in new window

0
 
s8webCommented:
If none of that works, you're going to have to give us some code or a link (preferably).

The norm is to assign text-align:center to the body (put text-align: left or whatever on your main container or child elements that shouldn't text align center). Then, if you declare a width, and auto on your left and right margins on any child elements that you want to center within their respective containers, they will.
0
 
Modifier1000Author Commented:
Thank you.
0
All Courses

From novice to tech pro — start learning today.