• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 442
  • Last Modified:

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!
0
Modifier1000
Asked:
Modifier1000
2 Solutions
 
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
 
HagayMandelCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Kim WalkerWeb 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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now