Float: center ???, Floatcenter

Float: center ???, Floatcenter

Old rule, first (ignore the text ^ V ^ in the figure ):

At first glance, it seems that the float: center is used for the middle image. But if you think about it carefully, the float attribute does not have the center value. How is that implemented? I will show it to you step by step.

1. Build the subject structure

The container contains two sub-elements: float: left and float: right;

2. Use a pseudo element: before as the intermediate img placeholder

If there is no interval between page-left and page-right, the width of the two pseudo elements is half of the img in the middle, which is as high as that of img.

.page_left:before, .page_right:before {            width: 151px;            height: 278px;            content: "";        }        .page_left:before{            float: right;        }        .page_right:before{            float: left;           }

3. Restore img

The pseudo element is already in the img position. Now you only need to reset the img.

 .img {            width: 302px;            height: 278px;            position: absolute;            top:0;            left: 349px;            background-image: url("img/sec1_qq.png");        }

For the demo, click http://runjs.cn/detail/nqhgwmbmand download the attachment. Cainiao, Pat !!!

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.