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

Question

我想將文本對齊到div的中間，但似乎無法正常工作。 我怎樣才能做到這一點？

謝謝您的幫助！

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

“個人信息”應位於頂部和底部之間。

Answer 1

使line-height成為元素的大小。 但是，僅當一行文本時才起作用。

Answer 2

CSS：

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

排隊：

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

更新：

這適用於JSFIDDLE ...

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

Answer 3

您可以使用table-cell顯示樣式來實現此目的：

的CSS

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

Answer 4

這個怎么樣？

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/

高度為40px： http : //jsfiddle.net/3NjUF/5/

Answer 5

您可以使用margin：0 auto的整潔技巧； 將div中的內容對齊到中心。 在這種情況下，以下代碼應該可以正常工作，

HTML：

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

CSS：

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

Answer 6

試試這個（黃色在那里表明它在div的中心

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

  </body>
  </html>

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

問題描述

6 個解決方案

解決方案1
3 已采納 2011-02-02 21:26:25

解決方案2
3 2011-02-02 21:28:11

解決方案3
2 2011-02-02 21:30:05

解決方案4
1 2011-02-02 21:44:36

解決方案5
0 2016-09-09 10:17:58

解決方案6
0 2011-02-02 21:38:23

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

問題描述

6 個解決方案

解決方案1 3 已采納 2011-02-02 21:26:25

解決方案2 3 2011-02-02 21:28:11

解決方案3 2 2011-02-02 21:30:05

解決方案4 1 2011-02-02 21:44:36

解決方案5 0 2016-09-09 10:17:58

解決方案6 0 2011-02-02 21:38:23

解決方案1
3 已采納 2011-02-02 21:26:25

解決方案2
3 2011-02-02 21:28:11

解決方案3
2 2011-02-02 21:30:05

解決方案4
1 2011-02-02 21:44:36

解決方案5
0 2016-09-09 10:17:58

解決方案6
0 2011-02-02 21:38:23