この記事では、CSS フローティング要素のセンタリングについて主に紹介します。現時点では、センタリングとは通常 50% を使用して実現します。みんなを見つけるのに役立つことを願っています。
<script>ec(2);</script>
浮動要素のセンタリングについては、実際にはあまり一般的には使用されませんが、一部の奇妙な面接官に対処するために、この問題を解決する方法を知っておく必要があります。
CSS コードを投稿します:
width:50%; height:300px; float:left; margin-left:50%; position:relative; left:-25%;background-color:#ccc;
重要なのは、左マージンを与え、左の値が p の幅の半分になるように配置することです。これを達成できます。
実際、この方法は、ポップアップ ウィンドウを作成してブラウザの中央に配置するためによく使用される方法でもあります。左 (上) マージンと左 (上) の位置に値を指定します。
例
<style type="text/css">
.ps{background:#ccc;width:600px;height:300px;margin:50px auto 0;}
.ps p{margin:0 auto;background:#000;width:400px;text-align:center;}
p{float:left;height:100px;width:98px;background:#fff;border:1px solid red;margin:0 auto;}
</style>
<body>
<p class="ps">
<p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</p>
</p>
</body>センタリング効果も得られることがわかりましたが、p を削除または追加する場合は、.ps p スタイルの幅を変更する必要があります。
関連する推奨事項:
以上がCSS フローティング要素のセンタリングについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
