首頁  >  文章  >  web前端  >  如何使用 CSS 將裁剪後的圖像水平居中?

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

Patricia Arquette
Patricia Arquette原創
2024-10-27 02:57:03429瀏覽

How to Center a Cropped Image Horizontally Using 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" src="logo.png">
</div></code>

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn