時間：2015-06-28 00:00:00 來源：IT貓撲網(wǎng) 作者：網(wǎng)管聯(lián)盟 我要評論(0)
在表格布局時代，不需要過多的考慮垂直居中的問題，在單元格中，默認(rèn)就是垂直居中的，一行文字是垂直居中，三行文字同樣也會垂直居中。進(jìn)行CSS網(wǎng)頁布局，這樣的形式改變了。文字默認(rèn)是居于容器頂部。
如下所示：
在這樣的情況下，如何實(shí)現(xiàn)文字垂直居中呢。分為三種情況：
一、如果是單行文本，可以用行距來解決問題。
我們?yōu)樗黾有芯嗟亩x，得到單行文本垂直居中的效果。
二、如果是多行文本，父容器不固定高度。
我們可以用padding來解決問題。
設(shè)置容器的padding上下為相同的固定值，容器的高度隨著內(nèi)容的增加而增加。
以此來實(shí)現(xiàn)多行文本的垂直居中。
我們致力于為中文網(wǎng)站提供動力！ |
三、如果是多行文本，父容器固定高度。
這就需要用到定位，而且需要給HTML增加標(biāo)簽。我們不提倡這樣做。
但目前這個方法可以更好的解決問題。
在容器的內(nèi)部需要增設(shè)兩個容器，來實(shí)現(xiàn)這樣的效果。
MrJin、MrJin_a和MrJin_b的設(shè)置分別如下：
#MrJin?{???? ????position:static; ????*position:relative;???? ????height:300px; ????width:500px; ????border:1px?solid?#03c; ????*display:block!important; ????display:table!important; } #MrJin_a?{ ????position:static; ????*position:absolute; ????display:table-cell; ????vertical-align:middle; ????*display:block; ????top:50%; ????width:100%; } #MrJin_b?{ ????position:relative; ????top:-50%; ????text-align:center; ????width:100%; } |
這樣設(shè)置以后，不管容器內(nèi)的文本是一行，還是多行，都將會實(shí)現(xiàn)垂直居中對齊。