How to Center a Cropped Image Horizontally Using CSS?

How to Horizontally Align an Image Using CSS

When trying to center an image horizontally, CSS provides an effective solution. In this question, the user displays an image using HTML and crops it using CSS. However, they encounter difficulty in centering the cropped image.

To resolve this issue, the following CSS rules can be applied:

<code class="css">.center img {        
  display:block;
  margin-left:auto;
  margin-right:auto;
}</code>

By adding the center class to the image element, it can be centered horizontally:

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

These CSS rules achieve the desired effect by setting the image to display as a block element and automatically adjusting the left and right margins. This results in the image being centered within its container.

The above is the detailed content of How to Center a Cropped Image Horizontally Using CSS?. For more information, please follow other related articles on the PHP Chinese website!