DIV内的居中文本

Question

我一直被这个烦人的问题困扰，我无法在div内居中放置文本。

我设法使文本开始在中间，但我希望整个文本居中。

这里是我的示例-任何提示和技巧都非常感谢。

#box {
  position: absolute;
  top: 100px;
  left: 50%;
  height: 100px;
  width: 450px;
  text-align: center;
  margin: 0px 0px 0px -225px;
  border: 2px solid black;
}
#TEXT {
  position: absolute;
  top: 30px;
  left: 50%
} 

<div id="box">
  <p id="TEXT">This text is not centered</p>
</div>

我的示例：http://jsfiddle.net/y97myrap/

Answer 1

     <div style="text-align:center;">
        data is here 
     </div>

在html5中

Answer 2

此代码解决了它：

#TEXT {
position: relative;
display: block;
text-align: center;
width: 100%;
top: 30px;
}

Answer 3

使用text-align:center;，如果您将width交给相关的div，这将起作用。...

将div 100%变宽，然后text-align:center;会将所有内容推到中间

#box {
    position: absolute;
    top: 100px;
    left: 50%;
    height: 100px;
    width: 450px;
    text-align: center;
    margin: 0px 0px 0px -225px;
    border: 2px solid black;
}
#TEXT {
    position: absolute;
    top: 30px;
    width:100%;
    text-align:center;
    <!-- left: 50% -->
}

<div id="box">
    <p id="TEXT">This text is not centered</p>
</div>

Answer 4

尝试从position: absolute;中删除#TEXT

http://jsfiddle.net/y97myrap/4/

Answer 5

使用绝对位置使元素居中，设置常用方法：

position:absolute;
left:50%;
margin left:{Minus half of the width of the element you want to center}

所以，我对您的建议如下：

http://jsfiddle.net/y97myrap/1/

使用外部容器div，然后向其添加text-align，如果您还想将高度居中，则如果父级高度固定，则可以在文本上使用与容器相同的高度作为行高，如下所示：

http://jsfiddle.net/y97myrap/5/

Answer 6

您可以使用display: table技术。在容器中添加table，在子元素中添加table-cell：

#box {
    position: absolute;
    top: 100px;
    left: 50%;
    height: 100px;
    width: 450px;
    text-align: center;
    margin: 0px 0px 0px -225px;
    border: 2px solid black;
    display: table;/*Add display table*/
}
#TEXT {
    display: table-cell;/*Add display table cell*/
    vertical-align: middle;/*add vertical-align middle*/
}

<div id="box">
    <p id="TEXT">This text is not centered</p>
</div>

Answer 7

您摆弄的问题是您的位置：绝对；剩下的50％...我猜你试图以此方式居中，但是问题是文本块将在50％之后开始。删除位置，给它text-align：center;。

并且要垂直对齐，请考虑使用表格单元格

Answer 8

删除位置：绝对，仅将自动页边距添加到您的#TEXT：

    #TEXT {
  top: 30px;
  left: 50%
  margin-left: auto;
  margin-right:auto;
}

Answer 9

#TEXT {
   position: relative;
   top:20%
}

Try it

Answer 10

这是一个简单的问题，即应用图像高度一半的负顶边距和宽度一半的负左边距。

代码：

#box {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}

它将使对象的位置固定，您可以根据需要调整div的位置。