DIV 中的居中文本 [重复]

Question

这个问题在这里已经有了答案：

如何在 div 块内居中文本（水平和垂直）？ (27 个回答)

1 年前关闭。

我一直被这个烦人的问题所困扰……我无法将文本居中放置在 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

使用text-align:center; ，如果您为相关div提供width ，这将起作用....

使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%
}

尝试一下

Answer 6

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

代码：

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

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

Answer 7

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

你小提琴的问题是你有 position:absolute; 和 50% 的左边......我猜你试图以这种方式居中，但问题是文本块将在 50% 后开始。 删除位置，给它 text-align:center;。

并垂直对齐考虑使用表格单元格

Answer 9

删除 position:absolute 并在 #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;
}