溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS中怎么實現文本垂直居中，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
CSS實現一行或多行文本垂直居中
在表格布局時代，不需要過多的考慮垂直居中的問題，在單元格中，默認就是垂直居中的，一行文字是垂直居中，三行文字同樣也會垂直居中。進行CSS網頁布局，這樣的形式改變了。文字默認是居于容器頂部。
如下所示：
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>[可先修改部分代碼再運行查看效果]
在這樣的情況下，如何實現文字垂直居中呢。分為三種情況：
一、如果是單行文本，可以用行距來解決問題。
在div-css.net以前的文章中，也有過這方面的介紹。
如何在父元素中垂直居中文本？
我們為它增加行距的定義，得到了單行文本垂直居中的效果。
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來解決問題。
設置容器的padding上下為相同的固定值，容器的高度隨著內容的增加而增加。
以此來實現多行文本的垂直居中。
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標準在中國的應用及發展</p></div> </body> </html>[可先修改部分代碼再運行查看效果]
三、如果是多行文本，父容器固定高度。
這就需要用到定位，而且需要給HTML增加標簽。我們不提倡這樣做。
但目前這個方法可以更好的解決問題。
在容器的內部需要增設兩個容器，來實現這樣的效果。
MrJin、MrJin_a和MrJin_b的設置分別如下：
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%; }這樣設置以后，不管容器內的文本是一行，還是多行，都將會實現垂直居中對齊。
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>看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
