CSS14----Reprint----6 Elements horizontal positioning

CSS3 How to implement an element horizontally centered, vertically centeredListen to the Voice

• |
• Browse:2678
• |
• Updated: 2015-06-30 11:13
• |
• Tags:css

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Step through Reading

CSS3 How to implement an element horizontally centered, vertically centered

Center horizontally

2. 1

   In-line elements

   If the element is set as an inline element in text, picture, and so on, the horizontal center is set by the parent element.

   Text-align:center to achieve.

4. 2

   Fixed-width block elements

   When the element is set as a block element, the use of text-align:center will not work. Elements that satisfy a fixed width and block of two conditions can be centered by setting the left and right margin value to "Auto" .

6. 3

   In the actual work we will encounter the need to set the "block element of the indefinite width" center, such as page navigation on the pages, because the number of paging is indeterminate, so we can not set the width to limit its elasticity.

8. 4

   Variable width block element 1

   1) Add a table label (including <tbody>, <tr>, <td>) to the outside of the center element you want to set.

   2) Set the "left and right margin center" for this table.

10. 5

    Variable width block element 2

    Change the dispaly of the block-level element to the inline type, and then use the text-align:center to achieve a center effect

12. 6

    Variable width block element 3

    The child elements are set position by setting float to the parent elementand then setting position:relative and left:50%for the parent element : Relative and left:-50% to achieve horizontal centering

    END

Center vertically

1. &NBSP;

   a single line of text that determines the height of the parent element The

   Vertically centered method is implemented by setting the parent element's  height  and  line-height  high consistency .

Li class= "exp-content-list list-item-2" > 

Speaking of vertical centering, there is a property vertical-align for vertical centering in the CSS, but this style only takes effect if the parent element is TD or TH.

2. &NBSP;

   high-definition multiline text for parent element 1

   Using Insert Table (including TBODY, TR, TD) labels, and set Vertical-align:middle (because the TD label defaults to Vertical-align as middle by default. So we do not need to explicitly set the

3. &NBSP;

   the parent element height-determined multiline text 2

   In  , Chrome, Firefox, and IE8 browsers can set the block-level element's  display:table-cell, vertical-align: Middle , but note that IE6, 7 does not support this style.

   step reading

4.  

CSS14----reprinted----6 Elements horizontal positioning