Question

我想要实现的是将字符串居中，同时将其强制到容器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开始从左侧输出文本。

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

Answer 1

嘿，我认为你应该左右：你的css中的0就像这样

#inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
}

Answer 2

将text-align: center;放在div＃inner上，然后从div＃outer中删除它。

Answer 3

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

#inner{
    position:absolute;
    left:50%;
    width:500px;
    margin-left:-250px;
}

Answer 4

只有在内部元素是非内联元素的情况下声明其宽度（仅具有效果）时，才能将内部元素垂直居中并与绝对定位相结合。

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

#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;

Answer 5

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

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

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

调整浏览器之间的中心差异

5 个答案: