Fatal编程技术网
  • css/
  • Css 对齐浏览器之间的中心差异

Css 对齐浏览器之间的中心差异

css

Css 对齐浏览器之间的中心差异,css,cross-browser,Css,Cross Browser,我想要实现的是将一个字符串居中，同时将其强制放到容器div的底部，但是下面在不同的浏览器中产生了3种不同的结果 <style> #outer { position: relative; background-color:blue; height: 50px; text-align: center; } #inner {

我想要实现的是将一个字符串居中，同时将其强制放到容器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>


#外{
位置：相对位置；
背景颜色：蓝色；
高度：50px；
文本对齐：居中；
}
#内在的{
底部：0px；
位置：绝对位置；
背景色：红色；
}
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
镀铬使#内部完美居中。 Firefox开始将字符串从完美的中间输出到右边，因此它看起来有点偏移，字符串越长，眼睛越明显。 IE开始从左边输出文本

有什么解决办法吗？哪个行为符合标准？

将
文本对齐：居中并将其从div#outer上移除。
将
文本对齐：居中，并将其从div#outer中移除。
您的inner应该有一个负边距，即元素宽度的1/2


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



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


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



只有在内部元素上声明宽度时，才能将内部元素垂直居中与绝对定位相结合，而宽度仅在非内联元素时有效

因此，您需要以下附加规则：


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



旁注：根据规范0可能永远不会有一个单位，所以总是写
top:0而不是
top:0px
仅当您在内部元素上声明宽度时，才可能将内部元素垂直居中定位并结合绝对定位，而宽度仅在非内联元素时有效

因此，您需要以下附加规则：


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



旁注：根据规范0可能永远不会有一个单位，所以总是写
top:0而不是
top:0px
如果CSS变得古怪，您可以使用jQuery。首先使用CSS隐藏内容，然后让jQuery将其居中，并在加载内容时取消隐藏。像这样的方法应该会奏效：


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



这是未经测试的，但应适用于任何条件。
如果CSS变得古怪，您可以使用jQuery。首先使用CSS隐藏内容，然后让jQuery将其居中，并在加载内容时取消隐藏。像这样的方法应该会奏效：


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



这是未经测试的，但应该适用于任何条件。
嘿，我认为您应该在css中这样给出left和right:0


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



嘿，我想你应该在你的css中给出left和right:0，如下所示


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



不会有任何效果，因为inner是内联元素。不会有任何效果，因为inner是内联元素。