gpt4 book ai didi

javascript - 为什么 margin : auto; not working?

转载 作者:太空宇宙 更新时间:2023-11-04 14:00:16 25 4
gpt4 key购买 nike

<分区>

即使我添加了 margin: auto; .content 类实际上是模式的内容,它仍然将自己定位在左上角。为什么会这样?如何居中对齐?

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>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com