Float:center???

The usual, first (please ignore the text in the picture ^v^):

At first glance the feeling is to use the float:center in the middle of the picture; but think carefully. The Float property has no center value. How did that come true? I'll take a step-by-step look at them.

1. Building the main structure

Two sub-elements are placed in the container, respectively Float:left and float:right;

2. Using pseudo-elements: Before as the middle IMG placeholder

If there is no gap between Page-left and Page-right, the width of the two pseudo-elements is half of the intermediate IMG, as high as IMG.

. Page_left: Before,. Page_right: Before {  width: 151px;   height: 278px;   content: "";  }                                        . Page_left: Before{  float: Right ;  }                . Page_right: Before{  float: left ;  }           

3. Ask IMG to return to the position

The pseudo-element is already in good position for IMG, now just let IMG homing.

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

Demo Please poke here:HTTP://RUNJS.CN/DETAIL/NQHGWMBM, can also be attached to download. I rookie, Pat!!!

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Float:center???