Solved

Center a DIV within another DIV with CSS

Posted on 2012-03-15
6
395 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 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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css, html 5 18
Getting Column Height to Match Other Column 5 44
Angular JS Route 3 54
CSS Logo Problem. 2 11
Read about how to approach blogging and about ways to do it right. Stand out from the crowd and let your knowledge be consumed by a large audience. This article aims to explain how your blog should look like,  the most important things to do while b…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

863 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

20 Experts available now in Live!

Get 1:1 Help Now