居中绝对定位的项目
问题描述:
我有以下文字:居中绝对定位的项目
<p>This is the text</p>
p {
position: absolute;
top: 300px;
}
我想这是从顶部300像素,但在浏览器(无论宽度)为中心,我会怎么做?谢谢。
答
这里有很多方法可以水平居中的东西。但每种方式都是针对不同的情况。
在这里,我添加了一个拨弄着三个版本定心:http://jsfiddle.net/kizu/5WMNE/
- 只是居中文字:价格便宜,但不公平的。
- 对于现代浏览器,您可以使用
transform: translate(-50%,0)
来对齐块,因为变换中的百分比是根据元素的维度计算得出的,而不是从父母的维度来计算。但它在IE中不起作用,但是可以编写能够模拟它的表达式。 - 如果你想添加额外的包装,你可以使用
inline-block
真正居中。
答
如果将宽度设置为100%,则可以使用文本对齐:
p {
position: absolute;
top: 300px;
width: 100%;
text-align: center;
}
答
<div id="outer">
<p>This is the text</p>
</div>
p {
position: absolute;
top: 300px;
left: 400px; /* or whatever half the width is */
}
#outer {
position: relative;
}
+0
“无论宽度”是怎样规定的,不是吗? –
不使用'position:absolute'将是一个选项。你需要什么? –
它是*文本*必须居中,还是*元素*?例如,“p”是否有“背景”? – thirtydot