Question

我想将我的文字与我的div中间对齐，但我似乎无法使其成功。我怎么能这样做？

感谢您的帮助！

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

“个人信息”应该位于顶部和底部之间。

Answer 1

使 line-height 元素的大小。但是，只有只有一行文字才会有效。

Answer 2

CSS：

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

INLINE：

<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

试试这个（黄色表示它位于div的中心

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

  </body>
  </html>

Answer 6

您可以使用 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
    }

如何在div的顶部和底部之间居中文本？

6 个答案: