如何在div的頂部和底部之間居中文本？

我想將我的文本對齊到我的div中間，但我似乎無法使其工作。我怎樣才能做到這一點？如何在div的頂部和底部之間居中文本？

感謝您的幫助！

<div style="height:40px;">Personal Information</div>

「個人信息」應該位於頂部和底部之間。

來源

2011-02-02 Andrew

請在這裏展示您的問題：http://jsfiddle.net/ – Hawxby 2011-02-02 21:25:12

製作行高元素的大小。但是，只有當你只有一行文字時纔會有效。

來源

2011-02-02 21:26:25 yoda

CSS：

myDiv 
{ 
display:table-cell; 
vertical-align:middle; 
}

INLINE：

<div style="display:table-cell; vertical-align:middle;">Personal Information</div>

UPDATE：

這部作品的jsfiddle ...

div { 
display:table-cell; 
width: 200px; 
height: 200px; 
vertical-align:middle; 
background: red; 
}

來源

2011-02-02 21:28:11

http://jsfiddle.net/sefej/ – yoda 2011-02-02 21:29:51

可以使用table-cell顯示風格實現這一點：

CSS

display: table-cell; 
vertical-align: middle;

來源

2011-02-02 21:30:05

試試這個（黃有沒有表明它是在div

<html> 
    <body> 
    <div style="height:40px; background-color:yellow"> 
    <div style="position:absolute; top:50%; display:table">Personal Information</div> 
    </div> 

    </body> 
    </html>

來源

2011-02-02 21:38:23

如何

這個中心？

CSS：

#outer { 
    height: 400px; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
} 

#outer[id] { 
    display: table; 
    position: static; 
} 

#middle { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    text-align: center; 
} /* for explorer only */ 

#middle[id] { 
    display: table-cell; 
    vertical-align: middle; 
    position: static; 
} 

#inner { 
    position: relative; 
    top: -50%; 
    text-align: center; 
} /* for explorer only */ 

#inner { 
    margin-left: auto; 
    margin-right: auto; 
} 

div.greenBorder { 
    border: 1px solid green; 
    background-color: ivory; 
}

HTML

<div id="outer" class="greenBorder"> 
    <div id="middle"> 
     <div id="inner" class="greenBorder"> center 

     </div> 
    </div> 
</div>

http://jsfiddle.net/3NjUF/4/

這與40像素的高度： http://jsfiddle.net/3NjUF/5/

來源

2011-02-02 21:44:36 ngen

可以使用保證金的絕招： 0自動;將div內的內容對齊到中心。在這種情況下，下面的代碼應該工作正常，

HTML：

<div style="height:40px;"><span>Personal Information</span></div>

CSS：

span 
    { 
     width: 50%; 
     margin: 20px auto; 
     text-align: center; 
     display:block 
    }

來源

2016-09-09 10:17:58

如何在div的頂部和底部之間居中文本？

回答

相關問題