如何在 CSS 中將裁剪後的圖像水平居中？

使用 CSS 將圖像水平居中

在網頁上顯示圖像時，通常需要將其水平居中對齊。但是，裁剪影像以僅顯示一部分可能會使此過程複雜化。

在您提供的 HTML 程式碼中，您使用 Clip 來裁剪圖像，但在將裁剪後的圖像居中時遇到困難。以下是您問題的解決方案：

解決方案：

要將裁剪後的圖像水平居中，您可以使用margin-left 和margin-right CSS 屬性。以下是更新後的程式碼：

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

為要居中的圖片加上cla​​ss="center" 屬性：

<code class="html"><div id="loading" class="loading-invisible">
  <img  class="loading center lazy" src="/static/imghwm/default1.png" data-src="logo.png" alt="如何在 CSS 中將裁剪後的圖像水平居中？" >
</div></code>

說明：

• display: block 屬性確保影像佔據其父元素的整個寬度。
• margin-left 和 margin-right: auto 屬性將左右邊距設為 " auto”，自動將剩餘空間均勻分佈在影像周圍，有效地將其居中。

以上是如何在 CSS 中將裁剪後的圖像水平居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！