|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級(jí)文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級(jí)文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級(jí)文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級(jí)文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。 在頁面布局時(shí)經(jīng)常需要對(duì)圖片的位置進(jìn)行處理,這篇文章圍繞圖片居中展開,主要講了如何用CSS實(shí)現(xiàn)圖片的水平居中,圖片垂直居中,還有圖片的水平垂直居中,課程比較實(shí)用,感興趣的小伙伴,可以參考一下,希望對(duì)你有所幫助。1、text-align: center實(shí)現(xiàn)圖片水平居中 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" />
</div>效果圖:
2、line-height和text-align: center 實(shí)現(xiàn)圖片的水平垂直居中 設(shè)置line-height的值等于height,可以實(shí)現(xiàn)垂直居中,text-align: center可以實(shí)現(xiàn)水平居中。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實(shí)現(xiàn)圖片水平垂直居中 利用table方法設(shè)置display: table,display: table-cell,但是這種方法并不兼容IE6/IE7,如果你不需要支持IE67可以使用這種方法 css樣式直接寫在標(biāo)簽里面,代碼如下: <div style="text-align: center; width: 400px;height:200px; display: table;border: green solid 1px;">
<span style="display: table-cell; vertical-align: middle; ">
<img src="img/logo.png" />
</span>
</div>4、position實(shí)現(xiàn)圖片水平垂直居中 定位方法:在父盒子中設(shè)置相對(duì)定位,在子盒子中設(shè)置絕對(duì)定位,即所謂的父相對(duì)子絕對(duì)。設(shè)置圖片位置左邊為50%,上邊為50%,(注意:這樣并沒有垂直居中),還需要設(shè)置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實(shí)現(xiàn)圖片水平垂直居中 利用background: url no-repeat center center 實(shí)現(xiàn)圖片的水平垂直居中 div{
width: 400px;
height:200px;
border: green solid 1px;
background: url(img/logo.png) no-repeat center center ;
}總結(jié):以上介紹了圖片居中的5種方法,各不相同,具體用什么方法,看個(gè)人習(xí)慣和工作需要,初學(xué)者可以自己動(dòng)手嘗試,希望可以幫助到你! 以上就是圖文詳解圖片水平垂直居中的五種方法(附代碼)的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!