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

ねえ、私はあなたが左と右を与えるべきだと思います :0 あなたのCSSでこのように

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

を div#inner に置き、text-align: center;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 に答える