How to Center a Cropped Image Horizontally with CSS?

Centering an Image Horizontally with CSS

In an effort to display only a portion of an image, you're using the clip() property to crop it. However, after cropping, you're experiencing difficulty centering the image.

To resolve this, implement the following CSS:

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

Next, add class="center" to your image to achieve horizontal centering:

<code class="html"><div id="loading" class="loading-invisible">  
    <img  class="loading center lazy" src="/static/imghwm/default1.png" data-src="logo.png" alt="How to Center a Cropped Image Horizontally with CSS?" >
</div></code>

With these modifications, your image should now be centered horizontally despite the cropping.

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