为啥保证金：自动；不工作？ [复制]
Posted
技术标签:
【中文标题】为啥保证金：自动；不工作？ [复制]【英文标题】：Why margin: auto; not working? [duplicate]为什么保证金：自动；不工作？ [复制] 【发布时间】：2016-09-14 16:04:36 【问题描述】：即使我添加了 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>【问题讨论】：
为 .model 类添加这个 text-align:center 像..modal text-align: center; 【参考方案1】：默认情况下，<img> 是 replaced inline element，因此您必须将其转换为 block。
因此，添加
display: block;
.content 的 CSS 也是如此
也就是说，.content 的更新后的 CSS 就像，
.content
display: block;
margin: auto;
width: 800px;
animation-name: zoom;
animation-duration: 0.6s;
【讨论】：
这是一个骗子（必须是 +100 答案已经涵盖了这个）所以为什么不投票关闭呢？ 已经投票给@LGSon.. @Lal 很明显是从here复制过来的@你不觉得我们应该关闭它吗？ @Leothelion 我已经投票结束了这个问题.. 对不起，我是***的新手，我不知道一定有类似的答案。我没有从任何地方复制问题，请原谅我不遵守规则。不会再发生了【参考方案2】：为 .model 类添加这个 text-align:center 像..
.modal text-align: center;
【讨论】：
【参考方案3】：对 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()
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>【讨论】：
以上是关于为啥保证金：自动；不工作？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章