Question

我一直困扰着这个烦人的问题，我有...我无法将文本置于div中。

我设法将文本传到中心的BEGIN，但我想让整个文本居中。

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

#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

使用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 2

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

在html5中

Answer 3

尝试从position: absolute;

中删除#TEXT

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

Answer 4

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

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 5

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

Try it

Answer 6

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

代码：

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

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

Answer 7

您可以使用display: table tecnique。在容器中添加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 8

你的小提琴中的问题是你有位置：绝对;剩下的50％...我猜测你试图以这种方式居中，但问题是文本块将在50％之后启动。删除位置，给它text-align：center;。

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

Answer 9

删除位置：绝对，只需将自动边距添加到#TEXT：

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

Answer 10

这段代码解决了它：

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

DIV中的中心文本

10 个答案: