为什么我的影像中心不会?

时间:2016-04-27 00:55:54

标签: html

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

这是我的css

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

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

enter image description here

4 个答案:

答案 0 :(得分:1)

试试这个

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

<强>式

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

答案 1 :(得分:1)

margin-left: 50%不做中心。

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

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

答案 2 :(得分:1)

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

.header {
margin: 0 auto;
width: [image width];
}
样式表中的

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

答案 3 :(得分:0)

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

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

<强> 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中。

希望这对你有所帮助。