使用CSS将图片水平居中 [英] Center an image horizontally using CSS

问题描述

我正在尝试使用CSS将图像水平居中.

I am trying to center a image horizontally using css.

我正在使用以下HTML代码在屏幕上显示图片:

I am displaying my image on the screen with the following HTML code:

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

我正在裁剪图像，因为我只想显示一些图像，并且正在使用以下CSS:

I am croping my image as I only want to display some of the image and I am using the following css:

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

但是，一旦裁切，我就无法确定如何居中.

however I can't work out how to center the image once it has been croped.

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

Anyone able to help ?

推荐答案

像这样使用绝对位置和边距

use position absolute and margin like this

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

这篇关于使用CSS将图片水平居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！