CODEWITHSUNDEEP
htmlcss
Netizen110
Netizen110

Reputation: 1654

How to center a DIV with CSS?

I want to know how to center a div with CSS. I googled some stuff & checked on stackoverflow but it was conflicting with my CSS code.

Here's my code (just in case):

body, p, span, div  {
    font-family: 'Droid Sans', arial, serif;
    font-size:12px;
    line-height:18px;
    color:#6d6d6d; } 
.countdown { 
    padding-top:15px; width: 100%;
    height: 68px;
    margin:0 auto 0 auto;
    bottom:0;
    position:absolute;
}
.countdown .countdown_section{
    background:url('images/backcountdown.png') no-repeat 1px top;
    float:left;
    height:100%;
    width:54px;
    margin:0 5px;
    text-align:center;
    line-height:6px;
}
.countdown .countdown_amount { 
    font-size:15px;
    color:#ab7100; 
    text-shadow:0 0.8px #fedd98; 
    line-height:52px; 
    font-weight:bold; 
    text-align: left; 
}
.countdown span { 
    font-size:8px;
    color:#999999;
    text-transform:uppercase;
    line-height:26px; 
}
<body>
<div class="countdown clearfix">							
</div>
</body>

Upvotes: 1

Views: 3268

Answers (9)

amachree tamunoemi
amachree tamunoemi

Reputation: 827

Stop using margin: 0 auto, Cross browser way of doing this is Here I have tested it and it works perfectly on all browsers

Upvotes: 0

user1647224
user1647224

Reputation:

Provided fixed width is set, and you put a proper DOCTYPE,

Do this:

 Margin-left: auto;
 Margin-right: auto;

Hope this helps

Upvotes: 3

Michael Ray-Von
Michael Ray-Von

Reputation: 124

You can also center an absolute position div by setting left to 50% and margin-left to -half of the full width in px.

div {
 position: absolute;
 width: 500px;
 left: 50%;
 margin-left: -251px;
}

Upvotes: 0

Jose Ortiz
Jose Ortiz

Reputation: 725

This will center your page it works great. 

  #yourdiv {
  width: width you want px;
  margin: 0 auto;
     }

Upvotes: 2

Aaron
Aaron

Reputation: 5227

The above answers will work for divs with relative or static positioning. For absolutely positioned elements (like your .countdown element, you'll need to set left: 50% and margin-left: -XXXpx where XXX represents half of the div's width (including padding and border).

(example: http://jsfiddle.net/7dhwG/)

Upvotes: 2

sunkencity
sunkencity

Reputation: 3472

<div style="margin:auto; width: 100px;">lorem</div>

Upvotes: 2

Yogu
Yogu

Reputation: 9445

You can center a div with a specific width using the following css:

#yourDiv {
    width: 400px;
    margin: 0 auto;
}

Upvotes: 3

Gabe
Gabe

Reputation: 50475

To center a div use:

#content{
    margin: 0 auto;
}

<div id="content">This will be centered horizontally</div>

Upvotes: 2

Dennis Traub
Dennis Traub

Reputation: 51624

The following automatically centers the element horizontally:

margin: 0 auto;

Upvotes: 8

Related Questions