Html 绝对定位和文本对齐

Question

提问by Misha Moroshko

I would like some text to be centered in the bottom of the screen.

我希望一些文本在屏幕底部居中。

I tried this, but it doesn't work. It looks like absolute positioning conflicts with the alignment.

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

How could I achieve this simple task ?

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

Answer 1

The div doesn't take up all the available horizontal space when absolutely positioned. Explicitly setting the width to 100% will solve the problem:

绝对定位时，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%;
}

?

Answer 2

Try this:

尝试这个：

You need to add left: 0and right: 0(not supported by IE6). Or specify a width

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

Answer 3

This should work:

这应该有效：

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

Answer 4

Maybe specifying a width would work. When you position:absolutean element, it's width will shrink to the contents I believe.

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