爲什麼使用margin：auto;不工作？

即使我已經添加了保證金：auto; .content類實際上是模態的內容，它仍然位於左上角。爲什麼會發生？我怎樣才能對齊它？爲什麼使用margin：auto;不工作？

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

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

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

來源

2016-05-18 Dhruv Chadha

添加該文本對齊：中心.MODEL類如.. .modal {文本對齊：中心;} – krishna

默認情況下，<img>是replaced inline element，因此你必須把它轉換爲block。

因此，加

display: block;

過你的CSS爲.content

也就是說，.content更新CSS會是什麼樣子，

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

來源

2016-05-18 09:13:03 Lal

這是一個騙局（必須+100個答案已經覆蓋這個），爲什麼不投票結束這樣的？ – LGSon

已投票@LGSon .. – Lal

@Lal它清楚地從[這裏]複製（http://stackoverflow.com/questions/963636/why-cant-i-center-with-margin-0-auto）難道你不知道認爲我們應該關閉它？ –

添加該文本對齊：中心對於.model類像..

.modal {text-align: center;}

來源

2016-05-18 09:13:38 krishna

對CSS做了一些改變。似乎解決了你的問題。

內容更改CSS：

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() { 
 
\t mod.style.display = "block"; 
 
}

#image { 
 
    width: 400px; 
 
\t cursor: pointer; 
 
} 
 
.modal { 
 
\t display: block; 
 
\t position: fixed; \t 
 
\t width: 100%; 
 
\t height: 100%; 
 
    top:0; 
 
    left:0; 
 
\t z-index: 1; 
 
    background-color: rgba(0,0,0,0.9); 
 
} 
 
.content { 
 
\t 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 { 
 
\t from {transform: scale(0.1);} 
 
    to {transform: scale(1);} 
 
}

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

來源

2016-05-18 09:27:34 Shrabanee

爲什麼使用margin：auto;不工作？

回答

相關問題