How to Center a Cropped Image Horizontally in CSS?

Centering an Image Horizontally with CSS

When displaying an image on a web page, it's often desirable to align it horizontally in the center. However, cropping an image to display only a portion can complicate this process.

In your provided HTML code, you're using clip to crop the image, but you're encountering difficulties centering the cropped image. Here's a solution to your problem:

Solution:

To center a cropped image horizontally, you can use the margin-left and margin-right CSS properties. Here's the updated code:

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

Add the class="center" attribute to the image you want to center:

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

Explanation:

• The display: block property ensures that the image will occupy the full width of its parent element.
• The margin-left and margin-right: auto properties set the left and right margins to "auto," which automatically distributes the remaining space evenly around the image, effectively centering it.

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