0

フロート要素をインラインに配置しながら、ページに対して中央に配置したい要素があります。

HTML:

<div class="container">
  <span class="centerMe">I should be centered</span>
  <span class="ontheright">I'm on the right!</span>
</div>

CSS:

.container{ text-align:center }
.centerMe{
  margin-left:auto;
  margin-right:auto;
}
.ontheright{float:right;}

問題は、浮動要素がそれを使い果たした後、中央に配置された要素が残りのスペースに対して中央に配置されることです。コンテナの全幅に対して中央に配置したい。float の代わりに使用してみposition:absoluteましたが、画面が小さすぎると衝突します。

http://jsfiddle.net/j5Mff/

4

3 に答える 3

1

-100% の右浮動要素に左マージンを設定できます。

そのフィドルの分岐バージョンでの私の答えは次のとおりです。

http://jsfiddle.net/frKET/1/

.container {
    position:relative;
    text-align:center
}
.centerMe {
    margin-left:auto;
    margin-right:auto;
}
.ontheright {
    float: right;
    margin-left: -100%;
}
于 2013-08-07T21:32:25.840 に答える
0

float 要素が常に一番上にある場合は、いつでも float 要素を絶対配置に変更できます。

http://jsfiddle.net/j5Mff/1/

.container {
    position:relative;
    text-align:center
}
.centerMe {
    margin-left:auto;
    margin-right:auto;
}
.ontheright {
    position:absolute;
    top:0;
    right:0;
}
于 2013-08-07T21:33:04.917 に答える