首頁 > web前端 > css教學 > 主體

圖文詳解圖片水平垂直居中的五種方法(附代碼)

yulia
發布: 2018-09-25 16:04:05
原創
18401 人瀏覽過

在頁面佈局時經常需要對圖片的位置進行處理,這篇文章圍繞圖片居中展開,主要講瞭如何用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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!