CSS はフローティング要素を水平方向に中央に配置します_html/css_WEB-ITnose

固定幅の非浮動要素の場合、margin:0 auto; を使用して水平方向のセンタリングを実行できます。

幅が可変の浮動要素の場合、水平方向のセンタリングの問題を解決する一般的な手法もあります。以下の通り:

HTML コード:

<div class="box">    <p>我是浮动的</p>    <p>我也是居中的</p></div>

CSS コード:

.box{    float:left;    position:relative;    left:50%;}p{    float:left;    position:relative;    right:50%;}

これにより、浮動要素の水平方向の中央揃えの問題が解決されます。

親要素と子要素同時に左に浮動すると、親要素が左に対して 50% 移動し、次に子要素が右に対して 50% 移動、、または子要素が左に対して -50% 移動します。