Question

为什么我的图像不会阻塞中心？

这是我的css

.heading {
    display: block;
    margin-left: 50%;
}

我的图片显然位于页面的右侧，而不是中心

Answer 1

试试这个

<div class="heading">
 <img src="img url">
</div>

<强>式

.heading{
display:block;
text-align:center;
}

Answer 2

margin-left: 50%不做中心。

正确的代码是margin: 0 auto;。我假设这个类heading放在图像本身上。否则你的容器将填满整个空间，并且0自动赢得了保证金。

左边50％的保证金将在整个页面上将图像的左侧精确推到50％。保证金还有很多，取决于您的图像定位方式取决于您必须应用的特性。

Answer 3

这不起作用，因为margin-left: 50%不是你将对象居中的方式。所有这一切都将50％的屏幕放在图像的左侧。正确的方法是这样的：

.header {
margin: 0 auto;
width: [image width];
}

样式表中的

。这将告诉浏览器在图像的顶部和底部放置0个边距，并自动将边距置于左侧和右侧。您还需要添加width: [width];才能生效。

Answer 4

前一段时间，当我试图将我的一些物品放在中心时，我也遇到了同样的问题。

我可以在这里使用此代码：

<强> HTML：

<div class="center">
    <img src="http://i.stack.imgur.com/q2WsC.png"/>
</div>

<强> CSS：

.center {
    margin: 0 auto;
}

此外，您可以选择在CSS中添加一些附加内容以使文本居中，这样如果您希望居中，则无需再进行任何工作。那个CSS就是

    text-align: center;

只需在margin元素之后将其添加到CSS中。

希望这对你有所帮助。