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

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

DDD
發布: 2024-10-26 08:41:30
原創
875 人瀏覽過

How to Center a Cropped Image Horizontally with CSS?

使用 CSS 將圖像水平居中

為了僅顯示圖像的一部分,您正在使用 Clip()屬性來裁剪它。但是,裁剪後,您很難將圖像居中。

要解決此問題,請實現以下CSS:

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

接下來,將class="center" 加入影像中實現水平居中:

<code class="html"><div id="loading" class="loading-invisible">  
    <img class="loading center" src="logo.png">
</div></code>
登入後複製

透過這些修改,您的影像現在應該水平居中,儘管進行了裁剪。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板