CSS フローティング要素のセンタリングについて-CSSチュートリアル-php.cn

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

小云云

リリース： 2017-12-13 13:10:06

オリジナル

3357 人が閲覧しました

この記事では、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 スタイルの幅を変更する必要があります。