溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么實現(xiàn)DIV層內(nèi)的文字垂直居中

發(fā)布時間:2021-08-05 20:22:41 來源:億速云 閱讀:101 作者:chen 欄目:web開發(fā)

這篇文章主要講解了“怎么實現(xiàn)DIV層內(nèi)的文字垂直居中”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“怎么實現(xiàn)DIV層內(nèi)的文字垂直居中”吧!

如果是單行文字想垂直居中,只要保證div高和行高保持一致,就可以了。用下面的代碼即可實現(xiàn):

代碼如下:


#div-a{
height:60px;
line-height:60px;
}


如果是多行文字,上面的垂直居中的方法就不行了,得用變通的方法實現(xiàn);這里建議使用table方法,在table外面再套上相應(yīng)的div,

代碼如下:

代碼如下:


<table>
<tr>
<td ></td>
</tr>
</table>


多行文字居中還有另外一種方法:

多行內(nèi)容居中,且容器高度可變,也很簡單,給出一致的 padding-bottom 和 padding-top 就行:

代碼如下:


.middle-demo-2
{
padding-top: 24px;
padding-bottom: 24px;
}

感謝各位的閱讀,以上就是“怎么實現(xiàn)DIV層內(nèi)的文字垂直居中”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對怎么實現(xiàn)DIV層內(nèi)的文字垂直居中這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!

向AI問一下細(xì)節(jié)

免責(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)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

div
AI