1

我想要实现的是将字符串居中同时将其强制到容器 div 的底部，但以下在不同的浏览器中会产生 3 种不同的结果。

<style>
         #outer {
            position: relative;
            background-color:blue;
            height: 50px;
            text-align: center;
         }

         #inner {
            bottom: 0px;
            position: absolute;
            background-color:red;
         }
        </style>
    </head>
    <body>
        <div id="outer">
            <span id="inner">
                aaaaaaaaaaaaaaaaaaaaaaa
            </span>
        </div>
    </body>

Chrome 完美地将#inner 居中。Firefox 开始从完美的中心向右输出字符串，所以它看起来有点偏移，字符串越长，眼睛越明显。IE 从左侧开始输出文本。

有什么解决方法吗？哪种行为符合标准？

4

5 回答 5

1

嘿，我认为你应该像这样在你的 CSS 中给出 left 和 right :0

#inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
}
于 2012-04-19T11:52:36.497 回答
0

将 放在text-align: center;div#inner 上，然后将其从 div#outer 中移除。

于 2012-04-19T11:45:54.817 回答
0

您的内部应该有一个负边距，即元素宽度的 1/2。

#inner{
    position:absolute;
    left:50%;
    width:500px;
    margin-left:-250px;
}
于 2012-04-19T11:46:30.587 回答
0

仅当您在其上声明宽度时，才可能将内部元素垂直居中与绝对定位相结合，这仅在它是非内联元素时才有效。

所以你需要这个额外的规则：

#inner{
   display:inline-block;
   width:<yourWidth>px;
   margin-left:-<yourWidth/2>px;
   left:50%;
}

或者，您可以执行以下操作：

#inner{
   display:block;
   left:0;
   text-align:center;
}

旁注：根据规范 0 可能永远不会有一个单位，所以总是写top:0;而不是top:0px;

于 2012-04-19T11:50:55.907 回答
0

好吧，如果 CSS 变得古怪，你可以使用 jQuery。首先使用 CSS 隐藏内容，然后让 jQuery 居中并在加载内容时取消隐藏。像这样的东西应该工作：

$(document).ready(function() {
    var newWidth = ($('#outer').width() - $('#inner').width()) / 2;
    $('#inner').css({'visibility': 'visible', 'margin-left': newWidth});
});

这是未经测试的，但应该适用于任何条件。

于 2012-04-19T11:51:55.733 回答