Question

我在页面上将两张图片集中在一起时遇到了问题：

<div name="pics"style="text-align:center;padding:70px">
<a name="picofday"><img class="picofday" src="castle.jpg" alt=""/></a>
<a name="frame"><img class="frame" src="frame.png" width="50%" height="50%" alt=""/>     
</a>
</div>

我尝试添加text-align属性并将图片集中在CSS中：

frame{display: block;
margin-left: auto;
margin-right: auto;
}
.picofday{
display: block;
margin-left:auto;
margin-right:auto;
}

Answer 1

尝试

a {
    display: block;
}
a img {
    dsiplay: block;
    margin: 0 auto;
    width: auto;
}

Answer 2

可能有几个原因导致您的元素不居中。首先尝试将margin: 0px auto添加到您的元素中。

保证金：0自动;要工作，元素需要有一个像width: 100px;这样的设置宽度。如果元素具有设定宽度但仍然不居中，请尝试display：block;。这两件事总是有效的。

如何在没有margin: 0 auto;的情况下居中元素：

如果你只是试图将所有元素集中在body标签内，只需在body标签上使用text-align: center;即可实现。

那就是说，我认为你并不是想这样做。

Answer 3

使您的A标签显示为阻止并将边距设置为0px auto; 它将证明元素的合理性

难以居中图片

3 个答案: