Solved

Center a DIV within another DIV with CSS

Posted on 2012-03-15
6
421 Views
Last Modified: 2012-04-02
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
Comment
Question by:Modifier1000
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37726479
The best way to center a div is to set it's left and right margin to "auto."
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37726482
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
 
LVL 16

Assisted Solution

by:HagayMandel
HagayMandel earned 250 total points
ID: 37728235
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 22

Accepted Solution

by:
Kim Walker earned 250 total points
ID: 37728994
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
 
LVL 16

Expert Comment

by:s8web
ID: 37732662
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
 

Author Closing Comment

by:Modifier1000
ID: 37795963
Thank you.
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

628 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question