Home > Article > Web Front-end > About centering css floating elements
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>
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;
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>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!