CODEWITHSUNDEEP
css
Md. Reazul Karim
Md. Reazul Karim

Reputation: 655

margin: auto is not centering

In the following style from the website: http://6.470.scripts.mit.edu/css_exercises/exercise4.html

<style type="text/css">
  #sponsors {
         margin:auto;
         margin-top:50px;
         overflow: hidden;
         width: auto;
         display: inline-block;
  }
  div.image img {
         margin: 3px;
         border: 1px solid #ffffff;
  }
  div.image a:hover img {
        border: 1px solid;
  }
</style>
</head>
<body>
 <h1>Sponsors of 6.470</h1>
 <div id="sponsors">
   <div class="image"><a href=""><img src="images/appian.png" width="150" height="85"></a></div>
   <div class="image"><a href=""><img src="images/dropbox.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/facebook.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/nextjump.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/palantir.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/quora.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/tripadvisor.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/vecna.png" width="150px" height="85px"></a></div>
  </div>
</body>

if the width: auto is removed from #sponsors then the div#sponsors is not center aligned even though margin: auto is used.

Similarly if instead of text-align: center is replaced by margin: auto in body style above, then the <h1> will not be center aligned which is preposterous;

because I have used margin: auto a lot of times and it was able to center the content without any issue. So hence help me and I will appreciate this a lot.

PS: I used firefox and besides use the doctype tag it is still not able to center with margin: auto.

Upvotes: 25

Views: 92392

Answers (10)

Abhishek Singh
Abhishek Singh

Reputation: 1

margin: auto doesn't put the element in center if width of element is 100%. So give some width to element and use margin: auto. It worked for me.

Upvotes: 0

vedanta krishna bhutani
vedanta krishna bhutani

Reputation: 11

This worked for me!

.classofdiv{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Upvotes: 1

yuliskov
yuliskov

Reputation: 1498

Take a look, maybe you have there a float property. In my case, setting float to none helps. Now div is properly aligned.

Upvotes: 0

user2775080
user2775080

Reputation: 73

div{
    position: relative;
    border: 1px solid #ddd; 
    width:150px; 
    height:50px;
    margin: auto;
    /*position: absolute; top: 0; left: 0; bottom: 0; right: 0;*/
}
img.displayed {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;

}

<html>
<div >
 <a>
 <img class="displayed" src="smiley.gif" >
 </a>
</div>
</html>

demo added in jsfiddle

Upvotes: 0

&#201;derson T. Szlachta
&#201;derson T. Szlachta

Reputation: 518

TO use margin:auto you should use position:relative, oh, and define a width Imagine you as a browser, how do you center a "box" (like div) if you don't know what is the width of that? ;)

I hope to help you

correcting: as Christopher Marshall said you don't need position:relative but specify width.

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

No need of using margin: 0 auto. Try the below code, it will work:

div#sponsors{
    /* other css properties */ 
    /* remove display:inline-block and margin: auto */       
    width:100%;  /* instead of width: auto */
    text-align: center;

}

div.img{
    /*remove float:left */
    /* other css properties */
    display: inline-block;
}

Remove text-align: center from body tag and give to h1 tag instead.

Upvotes: 3

Akhil Thesiya
Akhil Thesiya

Reputation: 950

If any div u want in center for margin auto always this div width is fix ......

#sponsors {
width:XXpx;
margin:50px auto 0;
overflow: hidden;
display: inline-block;
 }

Upvotes: -1

Sowmya
Sowmya

Reputation: 26969

You must specify width to div and don't give margin twice

#sponsors {
    margin:50px auto 0 auto;
    margin-top:50px;
    overflow: hidden;
    width:160px;
    background:aqua
 }

DEMO

Upvotes: 2

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

For centering DIV you need to set css for below.

Example

#sponsors {
   margin:0px auto;
}

Comment

You also need to set width for div.

DEMO

Upvotes: 2

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Define width or margin on your #sponsors ID

as like this

#sponsors{
margin:0 auto; // left margin is auto, right margin is auto , top and bottom margin is 0 set
width:1000px; // define your width according to your design 
}

More about margin auto

Upvotes: 14

Related Questions