溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“CSS如何實現(xiàn)文本垂直居中”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS如何實現(xiàn)文本垂直居中”文章吧。
CSS實現(xiàn)一行或多行文本垂直居中
在表格布局時代，不需要過多的考慮垂直居中的問題，在單元格中，默認就是垂直居中的，一行文字是垂直居中，三行文字同樣也會垂直居中。進行CSS網(wǎng)頁布局，這樣的形式改變了。文字默認是居于容器頂部。
如下所示：
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>div-css.net</title> <styletypestyletype="text/css"> #MrJin{ width:500px; height:200px; border:1pxsolid#03c; text-align:center; } </style> </head> <body> <dividdivid="MrJin">CSSWebDesign-div-css.net</div> </body> </html>[可先修改部分代碼再運行查看效果]
在這樣的情況下，如何實現(xiàn)文字垂直居中呢。分為三種情況：
一、如果是單行文本，可以用行距來解決問題。
在div-css.net以前的文章中，也有過這方面的介紹。
如何在父元素中垂直居中文本？
我們?yōu)樗黾有芯嗟亩x，得到了單行文本垂直居中的效果。
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>div-css.net</title> <styletypestyletype="text/css"> #MrJin{ width:500px; height:200px; border:1pxsolid#03c; text-align:center; line-height:200px; } </style> </head> <body> <dividdivid="MrJin">CSSWebDesign-div-css.net</div> </body> </html>[可先修改部分代碼再運行查看效果]
二、如果是多行文本，父容器不固定高度。
我們可以用padding來解決問題。
設(shè)置容器的padding上下為相同的固定值，容器的高度隨著內(nèi)容的增加而增加。
以此來實現(xiàn)多行文本的垂直居中。
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>div-css.net</title> <styletypestyletype="text/css"> #MrJin{ width:500px; padding:50px0; border:1pxsolid#03c; text-align:center; } </style> </head> <body> <dividdivid="MrJin"><p>CSSWebDesign-div-css.net</p> <p>致力于Web標準在中國的應(yīng)用及發(fā)展</p></div> </body> </html>[可先修改部分代碼再運行查看效果]
三、如果是多行文本，父容器固定高度。
這就需要用到定位，而且需要給HTML增加標簽。我們不提倡這樣做。
但目前這個方法可以更好的解決問題。
在容器的內(nèi)部需要增設(shè)兩個容器，來實現(xiàn)這樣的效果。
MrJin、MrJin_a和MrJin_b的設(shè)置分別如下：
ExampleSourceCode
#MrJin{ position:static; *position:relative; height:300px; width:500px; border:1pxsolid#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)的文本是一行，還是多行，都將會實現(xiàn)垂直居中對齊。
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>div-css.net</title> <styletypestyletype="text/css"> #MrJin{ position:static; *position:relative; height:300px; width:500px; border:1pxsolid#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%; } </style> </head> <body> <dividdivid="MrJin"> <dividdivid="MrJin_a"> <dividdivid="MrJin_b"> CSSWebDesign-div-css.net </div> </div> </div> </body> </html>css的基本語法是：
1、css規(guī)則由選擇器和一條或多條聲明兩個部分構(gòu)成；
2、選擇器通常是需要改變樣式的HTML元素；
3、每條聲明由一個屬性和一個值組成；
4、屬性和屬性值被冒號分隔開。
以上就是關(guān)于“CSS如何實現(xiàn)文本垂直居中”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼