DIV内的中心文本[重复]答案

【问题标题】：Center text inside a DIV [duplicate]DIV内的中心文本[重复]
【发布时间】：2014-11-13 16:54:42
【问题描述】：

我一直被这个烦人的问题所困扰...我无法在 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/

【问题讨论】：

您可以“接受”一个答案，向人们展示哪个为您解决了问题，而不是编辑问题。
请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange 网络上发帖，您已在 CC BY-SA 4.0 license 下授予 Stack Exchange 分发该内容的不可撤销的权利（即无论您未来的选择如何）。根据 Stack Exchange 政策，帖子的非破坏版本是分发的版本。因此，任何破坏行为都将被撤销。如果您想了解更多关于删除帖子的信息，请参阅：How does deleting work?

标签： html css positioning center centering

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用绝对位置使元素居中，常用的方式是设置：

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/

【讨论】：

【解决方案4】：

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

Try it

【讨论】：

【解决方案5】：

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

在 html5 中

【讨论】：

1. 这不是 HTML5 2. OP 有 Absolute 元素，所以这不起作用3. 一般不建议使用内联 CSS！ :)
顺便说一句...你的 DP...那是 GOHAN 还是 GOTENKS？
悟饭不是悟天克斯
这么想……大粉丝！！ :)
这里也一样，但没有新事件或他们的任何连续剧或电影............失望............ :(

【解决方案6】：

应用图像高度一半的负上边距和宽度一半的负左外边距是一件简单的事情。

代码：

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

它会使物体的位置固定，你可以根据需要调整div的位置。

【讨论】：

【解决方案7】：

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

【讨论】：

注意：支持IE8+！
我希望人们不要再支持 IE8-- :)

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

删除 position:absolute 并在您的#TEXT 中添加自动边距：

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

【讨论】：

【解决方案10】：

这段代码解决了它：

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

【讨论】：