自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

CSS實(shí)現(xiàn)文本垂直居中的三種情況

作者：admin
開發(fā) 前端
本文向大家介紹一下如何使用CSS實(shí)現(xiàn)一行或多行文本垂直居中，在單元格中，默認(rèn)就是垂直居中的，而進(jìn)行CSS網(wǎng)頁布局，這樣的形式改變了，文字默認(rèn)是居于容器頂部。

你對(duì)CSS中文本垂直居中問題是否了解，這里和大家分享一下CSS實(shí)現(xiàn)一行或多行文本垂直居中的方法，主要從三個(gè)方面向大家介紹。

CSS實(shí)現(xiàn)一行或多行文本垂直居中

　　在表格布局時(shí)代，不需要過多的考慮垂直居中的問題，在單元格中，默認(rèn)就是垂直居中的，一行文字是垂直居中，三行文字同樣也會(huì)垂直居中。進(jìn)行CSS網(wǎng)頁布局，這樣的形式改變了。文字默認(rèn)是居于容器頂部。

　　如下所示：

SourceCodetoRun 

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  7. <title>div-css.net</title> 
  8. <styletypestyletype="text/css"> 
  9. #MrJin{  
  10. width:500px;  
  11. height:200px;  
  12. border:1pxsolid#03c;  
  13. text-align:center;  
  14. }  
  15. </style> 
  16. </head> 
  17. <body> 
  18. <dividdivid="MrJin">CSSWebDesign-div-css.net</div> 
  19. </body> 
  20. </html> 
  21.  

 [可先修改部分代碼再運(yùn)行查看效果]

　　在這樣的情況下，如何實(shí)現(xiàn)文字垂直居中呢。分為三種情況：

一、如果是單行文本，可以用行距來解決問題。

　　在div-css.net以前的文章中，也有過這方面的介紹。
　　如何在父元素中垂直居中文本？
　　我們?yōu)樗黾有芯嗟亩x，得到了單行文本垂直居中的效果。

SourceCodetoRun 

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  7. <title>div-css.net</title> 
  8. <styletypestyletype="text/css"> 
  9. #MrJin{  
  10. width:500px;  
  11. height:200px;  
  12. border:1pxsolid#03c;  
  13. text-align:center;  
  14. line-height:200px;  
  15. }  
  16. </style> 
  17. </head> 
  18. <body> 
  19. <dividdivid="MrJin">CSSWebDesign-div-css.net</div> 
  20. </body> 
  21. </html> 
  22.  

 [可先修改部分代碼再運(yùn)行查看效果]

二、如果是多行文本，父容器不固定高度。

　　我們可以用padding來解決問題。

　　設(shè)置容器的padding上下為相同的固定值，容器的高度隨著內(nèi)容的增加而增加。
　　以此來實(shí)現(xiàn)多行文本的垂直居中。

SourceCodetoRun 

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  7. <title>div-css.net</title> 
  8. <styletypestyletype="text/css"> 
  9. #MrJin{  
  10. width:500px;  
  11. padding:50px0;  
  12. border:1pxsolid#03c;  
  13. text-align:center;  
  14. }  
  15. </style> 
  16. </head> 
  17. <body> 
  18. <dividdivid="MrJin"><p>CSSWebDesign-div-css.net</p> 
  19.  
  20. <p>致力于Web標(biāo)準(zhǔn)在中國的應(yīng)用及發(fā)展</p></div> 
  21. </body> 
  22. </html> 
  23.  

[可先修改部分代碼再運(yùn)行查看效果]　　#p#

三、如果是多行文本，父容器固定高度。

　　這就需要用到定位，而且需要給HTML增加標(biāo)簽。我們不提倡這樣做。
　　但目前這個(gè)方法可以更好的解決問題。
　　在容器的內(nèi)部需要增設(shè)兩個(gè)容器，來實(shí)現(xiàn)這樣的效果。
　　MrJin、MrJin_a和MrJin_b的設(shè)置分別如下：

ExampleSourceCode 

  1. #MrJin{  
  2. position:static;  
  3. *position:relative;  
  4. height:300px;  
  5. width:500px;  
  6. border:1pxsolid#03c;  
  7. *display:block!important;  
  8. display:table!important;  
  9. }  
  10. #MrJin_a{  
  11. position:static;  
  12. *position:absolute;  
  13. display:table-cell;  
  14. vertical-align:middle;  
  15. *display:block;  
  16. top:50%;  
  17. width:100%;  
  18. }  
  19. #MrJin_b{  
  20. position:relative;  
  21. top:-50%;  
  22. text-align:center;  
  23. width:100%;  
  24. }  

　　這樣設(shè)置以后，不管容器內(nèi)的文本是一行，還是多行，都將會(huì)實(shí)現(xiàn)垂直居中對(duì)齊。

SourceCodetoRun 

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  7. <title>div-css.net</title> 
  8. <styletypestyletype="text/css"> 
  9. #MrJin{  
  10. position:static;  
  11. *position:relative;  
  12. height:300px;  
  13. width:500px;  
  14. border:1pxsolid#03c;  
  15. *display:block!important;  
  16. display:table!important;  
  17. }  
  18. #MrJin_a{  
  19. position:static;  
  20. *position:absolute;  
  21. display:table-cell;  
  22. vertical-align:middle;  
  23. *display:block;  
  24. top:50%;  
  25. width:100%;  
  26. }  
  27. #MrJin_b{  
  28. position:relative;  
  29. top:-50%;  
  30. text-align:center;  
  31. width:100%;  
  32. }  
  33. </style> 
  34. </head> 
  35. <body> 
  36. <dividdivid="MrJin"> 
  37. <dividdivid="MrJin_a"> 
  38. <dividdivid="MrJin_b"> 
  39. CSSWebDesign-div-css.net  
  40. </div> 
  41. </div> 
  42. </div> 
  43. </body> 
  44. </html> 
  45.  

[可先修改部分代碼再運(yùn)行查看效果]
　　
文章來源:Div-Css.net設(shè)計(jì)網(wǎng)參考:http://www.div-css.net/div_css/topic/index.asp?id=10091

【編輯推薦】

  1. DIV+CSS解決文字與圖片居中問題
  2. IE6.0對(duì)padding的解讀分析
  3. 揭露CSS中margins折疊現(xiàn)象內(nèi)幕
  4. 七大CSS選擇符用法說明
  5. 技術(shù)分享 如何使用CSS控制超鏈接文字樣式
責(zé)任編輯：佚名 來源： div-css.net
CSS居中
相關(guān)推薦

2012-06-20 13:46:23

CSS

2021-07-26 08:31:17

算法

2018-09-18 11:20:07

css html5javascript

2010-08-27 10:30:16

CSS垂直居中

2010-09-10 08:54:52

DIV居中

2023-12-04 09:31:13

CSS卡片

2024-07-31 20:38:18

2010-08-31 14:49:57

CSS居中

2010-09-07 16:31:27

CSS

2022-12-20 15:17:29

CSS開發(fā)

2010-09-09 10:23:23

DIVCSS垂直居中

2010-09-02 13:03:38

CSS垂直居中

2010-09-02 16:26:59

CSS命名

2010-09-01 10:49:57

CSS水平居中垂直居中

2010-08-26 16:19:41

DIV圓角

2022-03-16 14:27:49

CSS三角形前端

2010-09-06 10:04:31

CSS樣式表

2010-09-14 15:10:49

CSS注釋

2010-08-26 11:27:35

CSS居中

2010-09-08 13:29:48

CSS
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)