Question

我有一个显示消息的div，我希望它显示在屏幕的顶部中心，边框应仅包围文本（不是屏幕的整个宽度），宽度是可变的（取决于消息的字符串长度）。这可能吗？我尝试了很多方法但没有成功。这是我最新的jsFiddle。谢谢你的阅读。

div{
    text-align:center;
    display:table;
    position:fixed;
    left:0;
    right:0;
    margin:auto;
    border:1px solid grey;
}

Answer 1

是的，这是可能的。有一些解决方案是可能的，所以让我引导您完成它们：

CSS 2D转换

我个人推荐这个解决方案，因为它有最少的警告，并享有几乎完整的跨浏览器支持（关于我们今天看到的浏览器共享统计数据）。

删除right属性并设置left: 50%。为了补偿元素自身的宽度，我们通过沿x轴的CSS 2D平移再次向左移动它。这个解决方案依赖于browser support for CSS 2D transforms，这是非常广泛的 - 唯一不支持它的浏览器是Opera Mini和IE≤8。

有些属性实际上并不需要：

right: 0
margin: auto

p / s：由于您希望它位于页面顶部，我相信您忘记在CSS中添加top: 0。

＆＃13;

    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%);
    }

＆＃13;

<div class="center">variable string</div>

＆＃13;

内联块

如果确实必须支持IE≤8，则必须依赖使用内联块。我个人不喜欢这个解决方案，因为它会为你的标记添加不必要的嵌套级别，这仅用于样式目的。

＆＃13;

div.center {
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
}
div.center > div {
  border:1px solid grey;
  display: inline-block;
}

＆＃13;

<link href="http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<div class="center"><div>variable string</div></div>

＆＃13;

Answer 2

无需display: table。没有它可以工作：http://jsfiddle.net/Rc9fa/366/你应该像我一样将文本包装在span中作为内联元素。

将固定的表格显示div居中，不设置宽度

2 个答案:

CSS 2D转换

内联块