日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
CSS實(shí)現(xiàn)文本垂直居中的三種情況

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

創(chuàng)新互聯(lián)于2013年創(chuàng)立,先為麥蓋提等服務(wù)建站,麥蓋提等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為麥蓋提企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

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

  如下所示:

SourceCodetoRun

 
 
 
  1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. div-css.net
  3. #MrJin{
  4. width:500px;
  5. height:200px;
  6. border:1pxsolid#03c;
  7. text-align:center;
  8. }
  9. CSSWebDesign-div-css.net
  •  [可先修改部分代碼再運(yùn)行查看效果]

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

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

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

    SourceCodetoRun

     
     
     
    1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. div-css.net
    3. #MrJin{
    4. width:500px;
    5. height:200px;
    6. border:1pxsolid#03c;
    7. text-align:center;
    8. line-height:200px;
    9. }
    10. CSSWebDesign-div-css.net
  •  [可先修改部分代碼再運(yùn)行查看效果]

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

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

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

    SourceCodetoRun

     
     
     
    1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. div-css.net
    3. #MrJin{
    4. width:500px;
    5. padding:50px0;
    6. border:1pxsolid#03c;
    7. text-align:center;
    8. }
    9. CSSWebDesign-div-css.net

    10. 致力于Web標(biāo)準(zhǔn)在中國(guó)的應(yīng)用及發(fā)展

  • [可先修改部分代碼再運(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. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. div-css.net
    3. #MrJin{
    4. position:static;
    5. *position:relative;
    6. height:300px;
    7. width:500px;
    8. border:1pxsolid#03c;
    9. *display:block!important;
    10. display:table!important;
    11. }
    12. #MrJin_a{
    13. position:static;
    14. *position:absolute;
    15. display:table-cell;
    16. vertical-align:middle;
    17. *display:block;
    18. top:50%;
    19. width:100%;
    20. }
    21. #MrJin_b{
    22. position:relative;
    23. top:-50%;
    24. text-align:center;
    25. width:100%;
    26. }
    27. CSSWebDesign-div-css.net
  • [可先修改部分代碼再運(yùn)行查看效果]
      
    文章來源:Div-Css.net設(shè)計(jì)網(wǎng)參考:http://www.div-css.net/div_css/topic/index.asp?id=10091


    新聞名稱:CSS實(shí)現(xiàn)文本垂直居中的三種情況
    網(wǎng)頁地址:http://www.dlmjj.cn/article/coodhic.html