我有一个显示消息的 div,我希望它固定在屏幕的顶部中心,边框应该只围绕文本(而不是屏幕的整个宽度)并且宽度是可变的(取决于消息的字符串长度)。这可能吗?我尝试了很多方法但没有成功。这是我最新的 jsFiddle .感谢阅读。
div{
text-align:center;
display:table;
position:fixed;
left:0;
right:0;
margin:auto;
border:1px solid grey;
}
最佳答案
是的,这是可能的。有一些可能的解决方案,所以让我向您介绍一下:
CSS 二维变换
我个人推荐此解决方案,因为它的警告最少,并且享有几乎完整的跨浏览器支持(关于我们今天看到的浏览器共享统计数据)。
删除 right
属性并设置 left: 50%
。为了补偿元素自身的宽度,我们再次通过 CSS 2D 平移沿 x 轴向左移动它。此解决方案依赖于 browser support for CSS 2D transforms ,它的传播非常广泛——唯一不支持它的浏览器是 Opera Mini 和 IE ≤8。
有些属性您实际上并不需要:
右:0
边距:自动
p/s: 因为你想让它在页面的顶部,我相信你忘了在你的 CSS 中添加 top: 0
。
div {
text-align:center;
position:fixed;
top: 0;
left: 50%;
border:1px solid grey;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
<div class="center">variable string</div>
行内 block
如果您真的必须支持 IE ≤8,您将不得不依赖于使用 inline-block。我个人不赞成这种解决方案,因为它会为您的标记添加不必要的嵌套级别,这仅用于风格目的。
div.center {
text-align: center;
position: fixed;
top: 0;
width: 100%;
}
div.center > div {
border:1px solid grey;
display: inline-block;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<div class="center"><div>variable string</div></div>
关于html - 居中一个固定的表格显示 div,不设置宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27903285/