浏览器

我想实现是同时围绕一个字符串迫使它的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开始从左边输出文本。

对此有什么解决办法？哪些行为符合标准？

来源

2012-04-19 The real thing

嘿，我觉得你应该给左，右：0在你的CSS像这样

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

来源

2012-04-19 11:52:36

你有道理。 – 2012-04-19 12:56:40

把text-align: center;对DIV＃内，并从DIV＃外将其删除。

来源

2012-04-19 11:45:54 sp00m

不会有任何影响，因为内心是一个内联元素。 – Christoph 2012-04-19 11:46:22

你是对的，对不起，我的错！ – sp00m 2012-04-19 11:49:26

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

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

来源

2012-04-19 11:46:30 MetalFrog

定位与绝对定位组合垂直居中您的内部元件是唯一可能的，如果声明在其上的宽度，这仅具有效果，如果它是一个非直列元件。

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

#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-19 11:50:55 Christoph

那么，你可以使用jQuery，如果CSS是古怪的。首先使用CSS隐藏内容，然后让jQuery将其集中并在内容加载时取消隐藏。像这样的东西应该工作：

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

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

来源

2012-04-19 11:51:55

回答

相关问题