ホームページ > 記事 > ウェブフロントエンド > CSS フローティング要素のセンタリングについて

CSS フローティング要素のセンタリングについて

小云云オリジナル: 2017-12-13 13:10:063381ブラウズ

この記事では、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 フローティング要素のセンタリングについて

関連記事