绝对定位和文本对齐答案

【问题标题】：Absolute Positioning & Text Alignment绝对定位和文本对齐
【发布时间】：2010-05-11 06:50:48
【问题描述】：

我想让一些文本在屏幕底部居中。

我试过this，但它不起作用。看起来绝对定位与对齐冲突。

我怎样才能完成这个简单的任务？

【问题讨论】：

标签： html css

【解决方案1】：

绝对定位时，div 不会占用所有可用的水平空间。将宽度显式设置为 100% 即可解决问题：

HTML

<div id="my-div">I want to be centered</div>

CSS

#my-div {
   position: absolute;
   bottom: 15px;
   text-align: center;
   width: 100%;
}

【讨论】：

【解决方案2】：

试试这个：

需要添加left: 0和right: 0（IE6不支持）。或者指定宽度

【讨论】：

【解决方案3】：

这应该可行：

#my-div { 
  left: 0; 
  width: 100%; 
}

【讨论】：

【解决方案4】：

也许指定宽度会起作用。当你position:absolute一个元素时，它的宽度会缩小到我认为的内容。

【讨论】：

【解决方案5】：

position: absolute;
color: #ffffff;
font-weight: 500;
top: 0%;
left: 0%;
right: 0%;
text-align: center;

【讨论】：

【解决方案6】：

只需添加 left:0;对：0；或添加宽度

【讨论】：