フロート要素をインラインに配置しながら、ページに対して中央に配置したい要素があります。
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
ましたが、画面が小さすぎると衝突します。