您好,登錄后才能下訂單哦!
今天小編給大家分享一下html怎么實(shí)現(xiàn)文字圖片垂直居中的相關(guān)知識點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
方法一:設(shè)置盒子高度與line-height相同,本方法適用于一行文字。
圖片垂直居中和一行文字對齊用屬性vertical-align
小圖標(biāo)和文字垂直對齊,小圖標(biāo)作為背景插入
//attr:設(shè)置自己生成的屬性,像selectedchecked這類即使用鼠標(biāo)點(diǎn)過他的值是undefinded,所以自有屬性推薦用prop
包含塊(ContainingBlock)
某個元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的,包含塊不會特指某個元素區(qū)域,而是一塊視覺假想出來的一塊區(qū)域,理解了他就可以方便的為元素進(jìn)行定位。
那怎么知道一個元素的包含塊在哪呢?
初始包含塊
用戶代理(比如瀏覽器)選擇根元素作為containingblock(稱之為初始containingblock)。當(dāng)html的子元素沒有其他跟親近的包含塊時,會依靠初始包含塊進(jìn)行定位、
初始包含塊的大???即視口大小,,高度不會隨著html的增大而增大。
非絕對定位的元素,其包含塊為最近的塊級祖先元素盒子的內(nèi)容邊界組成。
浮動元素也是如此,從內(nèi)容邊界開始。
絕對元素的包含塊由最近的position不是static的祖先建立
其實(shí)這個比較復(fù)雜,需要考慮該絕對元素的包含塊是內(nèi)聯(lián)還是塊級元素創(chuàng)建的。內(nèi)聯(lián)的情況兼容性比較差,所以一般都避免讓內(nèi)聯(lián)元素里面去包含塊級元素,所以大部分還都是由塊級元素創(chuàng)建包含塊。
其containingblock由祖先的border內(nèi)邊界形成。
如果元素有屬性'position:fixed',containingblock由視口建立
css圖片居中分css圖片水平居中和垂直居中兩種情況,有時候還需要圖片同時水平垂直居中,
下面分幾種居中情況分別介紹:
css圖片水平居中
1.利用margin:0auto實(shí)現(xiàn)圖片水平居中
利用margin:0auto實(shí)現(xiàn)圖片居中就是在圖片上加上css樣式margin:0auto如下:
<divstyle="text-align:center;width:500px;border:greensolid1px;">
<imgalt=""src="https://www.baidu.com/img/baidu_jgylogo3.gif"style="margin:0auto;"/></div>
2.利用文本的水平居中屬性text-align:center
代碼如下:
<divstyle="text-align:center;width:500px;border:greensolid1px;"><imgalt=""src="https://www.baidu.com/img/baidu_jgylogo3.gif"style="display:inline-block;"/></div>
css圖片垂直居中
1.利用高==行高實(shí)現(xiàn)圖片垂直居中
這種方法是要注明高度才可以使用,代碼如下:
<divstyle="text-align:center;width:500px;height:200px;line-height:200px;border:greensolid1px;">
<imgalt=""src="https://www.baidu.com/img/baidu_jgylogo3.gif"style="display:inline-block;vertical-align:middle;"/></div>
2.利用table實(shí)現(xiàn)圖片垂直居中
利用table的方法是利用了table的垂直居中屬性,代碼如下:
這里使用display:table;和display:table-cell;來模擬table,這種方法并不兼容IE6/IE7,IE67不支持display:table,如果你不需要支持IE67那就可以用
缺點(diǎn):當(dāng)你設(shè)置了display:table;可能會改變你的原有布局
<divstyle="text-align:center;width:500px;height:200px;display:table;border:greensolid1px;"><spanstyle="display:table-cell;vertical-align:middle;">
<imgalt=""src="https://www.baidu.com/img/baidu_jgylogo3.gif"style="display:inline-block;"/>
</span></div>
3.利用絕對定位實(shí)現(xiàn)圖片垂直居中
如果已知圖片的寬度和高度可以這樣,代碼如下:
<divstyle="width:500px;height:200px;position:relative;border:greensolid1px;">
<imgalt=""src="https://www.baidu.com/img/baidu_jgylogo3.gif"style="width:120px;height:40px;position:absolute;left:50%;top:50%;margin-left:-60px;margin-top:-20px;"/></div>
4.移動端可以利用flex布局實(shí)現(xiàn)css圖片垂直居中
移動端一般瀏覽器版本都比較高,所以可以大膽的使用flex布局,(flex布局參考css3的flex布局用法)演示代碼如下:
css代碼:
<styletype="text/css">
.ui-flex{
display:-webkit-box!important;
display:-webkit-flex!important;
display:-ms-flexbox!important;
display:flex!important;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap
}
.ui-flex,.ui-flex*,.ui-flex:after,.ui-flex:before{
box-sizing:border-box
}
.ui-flex.justify-center{
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center
}
.ui-flex.center{
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center
}
</style>
html代碼:
<divclass="ui-flexjustify-centercenter"style="border:greensolid1px;width:500px;height:200px;">
<divclass="cell">
<imgalt=""src="https://www.baidu.com/img/baidu_jgylogo3.gif"style=""/>
</div></div>
以上就是“html怎么實(shí)現(xiàn)文字圖片垂直居中”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。