Why margin: auto; not working?

Question

Even though I have added margin: auto; to .content class which is actually the content of the modal, it still positions itself at top left. Why does this happen? How can I centre align it?

var mod=document.getElementById("myModal");
var img= document.getElementById("image");
img.addEventListener("click",animate);
function animate() {
 mod.style.display = "block";
}

#image {
    width: 400px;
 cursor: pointer;
}
.modal {
 display: none;
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
    background-color: rgba(0,0,0,0.9);
}
.content {
 margin: auto;
 width: 800px;
 animation-name: zoom;
 animation-duration: 0.6s;
}
@keyframes zoom {
 from {transform: scale(0.1);} 
    to {transform: scale(1);}
}

<html>
    <head>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <img id="image" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
  <div id="myModal" class="modal">
   <img class="content" id="image01" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
  </div>
        <script src="script.js"></script>  
 </body>
</html>

add this text-align:center for .model class like.. .modal {text-align: center;} — krishna, May 18 '16 at 09:13

score 8 · Accepted Answer · answered May 18 '16 at 09:13

8

By default, <img> is replaced inline element and thus you'll have to convert it to block.

Thus, add

display: block;

too to your CSS for .content

That is, the updated CSS for .content would be like,

.content{
    display: block;
    margin: auto;
    width: 800px;
    animation-name: zoom;
    animation-duration: 0.6s;
}

answered May 18 '16 at 09:13

Lal

14,726
4
45
70

This is a dupe (must be +100 answers already cover this) so why not vote to close as such? – Asons May 18 '16 at 09:25
Already voted @LGSon.. – Lal May 18 '16 at 09:31
@Lal Its clearly copied from [here](http://stackoverflow.com/questions/963636/why-cant-i-center-with-margin-0-auto) Don't you think we should close it? – Leo the lion May 18 '16 at 09:38
@Leothelion I've already voted to close the question.. – Lal May 18 '16 at 09:45
I'm sorry guys, I'm new to stackoverflow, i didnt know that there must be similar answers. I have not copied the question from anywhere, pls pardon me for not following the rules. It wont happen again – Dhruv Chadha May 18 '16 at 13:47
No issues @DhruvChadha.. Dont be disheartened.. :D – Lal May 18 '16 at 14:36

score 0 · Answer 2 · answered May 18 '16 at 09:13

0

add this text-align:center for .model class like..

.modal {text-align: center;}

answered May 18 '16 at 09:13

krishna

508
2
8

score 0 · Answer 3 · answered May 18 '16 at 09:27

Made some changes in css. Which solved your issue seems.

Changed css for content :

margin: auto;
display: block;
/* top: 0; */
width: 800px;
animation-name: zoom;
animation-duration: 0.6s;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;

var mod=document.getElementById("myModal");
var img= document.getElementById("image");
img.addEventListener("click",animate);
function animate() {
 mod.style.display = "block";
}

#image {
    width: 400px;
 cursor: pointer;
}
.modal {
 display: block;
 position: fixed; 
 width: 100%;
 height: 100%;
  top:0;
  left:0;
 z-index: 1;
    background-color: rgba(0,0,0,0.9);
}
.content {
 margin: auto;
    display: block;  
    width: 800px;
    animation-name: zoom;
    animation-duration: 0.6s;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}
@keyframes zoom {
 from {transform: scale(0.1);} 
    to {transform: scale(1);}
}

<html>
    <head>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
    
  <div id="myModal" class="modal">
   <img class="content" id="image01" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
  </div>
        <script src="script.js"></script>  
 </body>
</html>

Why margin: auto; not working?

3 Answers3