ブラウザ間の中心の差を整える

私が達成したいのは、文字列をセンタリングしてコンテナ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>

クロムは#innerを完全に集中します。 Firefoxは文字列をから右への完璧な中心に出力し始めるので、何とか少しシフトしたように見え、文字列が長くなる程、目には明らかになります。 IEは、テキストを左から出力し始めます。

これに対応する方法はありますか？どの動作が標準に準拠していますか？

出典

2012-04-19 The real thing

ちょっと私はあなたが左右与えるべきだと思う：あなたのCSSで0この

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

出典

2012-04-19 11:52:36

あなたは真実を持っています。 –

text-align: center;をdiv＃innerに置き、div＃outerから削除します。

出典

2012-04-19 11:45:54 sp00m

などのように、内側にはインライン要素であるため、何の効果もありません。 – Christoph

あなたは正しいです、申し訳ありません、私のせいです！ – sp00m

インナーは、エレメントの幅の1/2の負のマージンを持つ必要があります。あなたはそれが非インライン要素である場合にのみ、効果があり、その上に幅を、宣言した場合、垂直絶対位置との組み合わせを中心にあなたの内なる要素を配置する

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

出典

2012-04-19 11:46:30 MetalFrog

は、のみ可能です。

ので、あなたは、この追加のルールが必要です。

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

サイドノート：仕様0に応じてユニットを持たないかもしれないので、常にtop:0;を書く代わりに

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

を、次のことを行うことができます代わりにtop:0px;

出典

2012-04-19 11:50:55 Christoph

CSSがうまくいかない場合は、jQueryを使用できます。まず、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

ブラウザ間の中心の差を整える

答えて

関連する問題