The center of floating elements is not often used, but in order to cope with some wonderful interviewers, you also need to know how to solve the 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 locate, so that leave value is half of the div width, you can achieve.
In fact, this method is also to do the window, so that it is located in the middle of the browser is commonly used methods: to a left (up) margin, in the position to the top value.
Example
<style type= "Text/css" >
. Divs{background: #ccc; width:600px;height:300px;margin:50px auto 0;}
. divs div{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>
<div class= "DIVs" >
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</div>
</div>
</body>
We found that the center effect is also achieved, but its scalability is poor, if you delete a P or add a p, you need to the. DIVs Div This style of width to modify
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
