Solved

Center a DIV within another DIV with CSS

Posted on 2012-03-15
6
390 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
6 Comments
 
LVL 21

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 21

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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 21

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

707 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now