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

如何使用 CSS 水平對齊圖像

當嘗試將圖像水平居中時，CSS 提供了有效的解決方案。在此問題中，使用者使用 HTML 顯示圖像並使用 CSS 裁剪圖像。但是，他們在將裁剪後的圖像居中時遇到困難。

要解決此問題，可以應用以下CSS 規則：

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

透過將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>

這些CSS 規則透過將影像設定為區塊元素顯示並自動調整左右邊距來達到所需的效果。這會導致映像在其容器內居中。

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