css水平居中图像

我想使用css水平居中图像。css水平居中图像

我在屏幕上显示我的图像与下面的HTML代码：

<div id="loading" class="loading-invisible"> 
    <img class="loading" src="logo.png"> 
</div>

我croping我的形象，我只是想显示一些图像，我使用了下面的CSS：

img.loading 
{ 
position:absolute; 
clip:rect(0px,681px,75px,180px); 
}

但是我无法弄清楚如何在图像被中心化后如何居中。

任何人都可以提供帮助吗？

2012-08-08 Aaron

使用位置绝对和保证金这样

img.loading{ 
    position: absolute; 
    left: 50%; 
    margin-left: -(half ot the image width)px 
}

2012-08-08 00:58:36 Zendy

谢谢..工作处理 – Aaron 2012-08-08 01:11:39

使用margin

margin-left:auto; 
margin-right:auto;

2012-08-08 00:49:04

我相信你还需要一个'display：block;'作为img标签。 – Endophage 2012-08-08 00:50:16

似乎没有工作 – Aaron 2012-08-08 00:56:09

你也必须给它一个工作的宽度。你也可以给包装器文本对齐：中心;只要你不改变'display'到'inline'以外的东西就可以使图像居中。 – qwerty 2012-11-06 14:34:37

试试这个为你的CSS：

.center img {   
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
}

，然后添加到您的图像居中：

class="center"

2012-08-08 05:20:30 Cynthia

它对我有用。谢谢 – gnganpath 2013-12-03 07:18:30

当img必须设置为'position：absolute;'时，此解决方案将不起作用。 – Kruser 2016-03-30 23:46:40

回答