CSS multiple child frames centered

Sometimes we need to center a child frame in a fixed-width container (for example, a Div, or other block-level element), and if there is only one child frame, we just need to add CSS attributes to the Margin:auto.

But if we want to center multiple child frames and divide the rest of the parent frame, we use CSS box-align:center for all of the child frames to achieve this effect.

But there are still a large number of mainstream browsers do not support the Box-align attribute, then how should we write CSS, so that the effect can be compatible with most browsers?

The usual method

In order to arrange multiple block-level elements in the same row, we are accustomed to using the float property to float the child frame, and then use the margin property to leave some space between each child frame. But doing so would trigger the classic IE6 double margin BUG, which would instead put extra time to debug the IE6 hack.

Although we can also avoid IE6 bugs by display:inline, we still need to adjust the spacing between these frames to prevent the last one from being squeezed to the next line.

Change the child frame level and control the remaining whitespace

The practice of using float and margin to center multiple child frames and divide the remaining space of the parent frame is a lot more flawed. To avoid these drawbacks, we can also use another method: the level of the handle frame is changed to Inline-block, and the spacing between frames is controlled by the Letter-spacing property.

Suppose that there are four block-level child containers in a parent frame, each of which has a size of 100px x 100px. In order for these sub frames to be arranged in the same row, we can change them to the inline-block level, because there is no other content between the child frame and the parent frame, so it is a breeze to control the spatial allocation of the child frame. Assuming that the parent frame is id=parent and the child frame is class=child, then the CSS can be written like this:

The following is the referenced content: #parent { width : 615px ; Border : Solid 1px #aaa ; text-align : Center ; font-size : 20px ; letter-spacing : 35px ; Whitewhite-space : nowrap ; line-height : 12px ; overflow : Hidden ; } . Child { width : 100px ; height : 100px ; Border : Solid 1px #ccc ; Display : inline- block ; vertical-align : Middle ; }

In this style, #parent text-align, letter-spacing, white-space, overflow and. Child vertical-align, display these attributes are the key to achieving the desired effect, Let's explain how these properties work.

Text-align: Making #parent里的所有内容都居中

Letter-spacing: Controls the amount of white space between each child frame

White-space:nowrap: Prevents the last child frame from being squeezed to the next line

Overflow:hidden: Hide content beyond #parent range

Vertical-align:middle: Align all child frames vertically

Display:inline-block: Is that all the child frames are lined up in the same row and maintain the attributes of the block-level elements

Compatible IE

Today, the old version of IE browser has become a web designer's heart hate, although the above CSS can be compatible with IE8, but because IE6 and IE7 not fully support inline-block-level elements, so we also need to write a section of the following hack, to ensure that in the IE6 And IE7 can maintain the same effect as modern browsers.

The following are the referenced contents: . Child { *display:inline ; * margin : 0 20px 0 20px ; }

The final effect of the example shown in this article can be seen in this demo.

Postscript

The example cited in this article, although only a short couple of IE Hack, but in the actual development of the Hack must be written more and more, so the task of eliminating the old version of IE has no delay. I've heard a lot of people say, "I do not use IE browser, I am proud to travel and the window of the world, here I remind you, for those who cannot explain clearly, we can simply and they said:" All can use Alipay browser is backward, please give up use. " ”。