About centering css floating elements-CSS Tutorial-php.cn

About centering css floating elements

小云云

Release： 2017-12-13 13:10:06

Original

3357 people have browsed it

In this article, we mainly introduce to you about the centering of CSS floating elements. For everyone, centering refers to the page. At this time, we usually use 50% to achieve it. Let’s look at an example of centering CSS floating elements. , hope it can help find everyone.

<script>ec(2);</script>

Copy after login

Regarding the centering of floating elements, it is actually not commonly used, but in order to deal with some weird interviewers, you need to know how to solve this problem.

Post a piece of css code:

width:50%; height:300px; float:left; margin-left:50%;  position:relative; left:-25%;background-color:#ccc;

Copy after login

The key is to give a left margin, and then position it so that the left value is half of the p width, and you can achieve it.

In fact, this method is also a commonly used method to make a pop-up window and place it in the middle of the browser: give a left (top) margin and a left (top) value in position.

Example

 <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>

Copy after login

We found that the centering effect can also be achieved, but its scalability is poor. If you delete a p or add a p, you need to modify the width in the .ps p style. to modify.

Related recommendations:

Introduction to the definition and usage of CSS floating and positioning

Summary of CSS floating function definition and usage

A brief introduction to the method of CSS floating

The above is the detailed content of About centering css floating elements. For more information, please follow other related articles on the PHP Chinese website!