在頁面佈局時經常需要對圖片的位置進行處理,這篇文章圍繞圖片居中展開,主要講瞭如何用CSS實現圖片的水平居中,圖片垂直居中,還有圖片的水平垂直居中,課程比較實用,有興趣的小夥伴,可以參考一下,希望對你有幫助。
1、text-align: center實作圖片水平居中
text-align一般用於文字的水平居中,也可以用於圖片,程式碼如下:
CSS部分:
<style type="text/css"> div{ text-align: center; width: 500px; border: green solid 1px; } </style>
HTML部分:
<div> <img src="img/logo.png" / alt="圖文詳解圖片水平垂直居中的五種方法(附代碼)" > </div>
效果圖:
2、line-height和text-align: center 實作圖片的水平垂直居中
設定line-height的值等於height,可以實現垂直居中,text-align: center可以實現水平居中。 HTML部分一樣,CSS程式碼如下:
<style type="text/css"> div{ text-align: center; width: 400px; height:200px; line-height:200px; border: green solid 1px; } img{ vertical-align: middle; } </style>
效果圖:
3、display: table和display: table-cell實作圖片水平垂直居中
利用table方法設定display: table,display: table-cell,但這種方法並不相容IE6/IE7,如果你不需要支援IE67可以使用這個方法
css樣式直接寫在標籤裡面,程式碼如下:
<div style="max-width:90%"> <span style="display: table-cell; vertical-align: middle; "> <img src="img/logo.png" / alt="圖文詳解圖片水平垂直居中的五種方法(附代碼)" > </span> </div>
#4、position實作圖片水平垂直居中
定位方法:在父盒子中設定相對定位,在子盒子中設定絕對定位,即所謂的父相對子絕對。設定圖片位置左邊為50%,上邊為50%,(注意:這樣並沒有垂直置中),還要設定margin-left為圖片長度的一半,margin-top為圖片高度的一半。 HTML部分一樣,CSS程式碼如下;
<style type="text/css"> div{ width: 400px; height:200px; position: relative; border: green solid 1px; } img{ width: 200px; height: 50px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -25px; } </style>
5、背景background實作圖片水平垂直居中
利用background: url no-repeat center center 實作圖片的水平垂直居中
div{ width: 400px; height:200px; border: green solid 1px; background: url(img/logo.png) no-repeat center center ; }
總結:以上介紹了圖片居中的5種方法,各不相同,具體用什麼方法,看個人習慣和工作需要,初學者可以自己動手嘗試,希望可以幫助到你!
以上是圖文詳解圖片水平垂直居中的五種方法(附代碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!