Horizontal centering--inline elements, fixed-width blocks, variable-width blocks_html/css

Horizontal centering--inline elements, fixed-width blocks, variable-width blocks_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:38:51

Original

1225 people have browsed it

Statement: From http://www.imooc.com/learn/9 Learn

Inline elements

If the set element is an inline element such as text, image, etc., horizontal centering is This is achieved by setting text-align:center to the parent element .

Fixed-width block element

Elements that meet the two conditions of fixed width and block can be centered by setting the "left and right margin" value to "auto".

1 margin:0 auto;

Block elements with variable width

There are three methods for centering block elements with variable width (these three methods are currently used more often):

Add table tag
Set display; inline method
Set position:relative and left:50%;

1.HTML code:

 1 <div> 2 <table> 3   <tbody> 4     <tr><td> 5     <ul> 6         <li><a href="#">1</a></li> 7         <li><a href="#">2</a></li> 8         <li><a href="#">3</a></li> 9     </ul>10     </td></tr>11   </tbody>12 </table>13 </div>

Copy after login

CSS code:

1 table{2     margin:0 auto;3 }4 ul{list-style:none;margin:0;padding:0;}5 li{float:left;display:inline;margin-right:8px;}

Copy after login

html code:

<body><div class="container">    <ul>        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>    </ul></div></body>

Copy after login

css code:

<style>.container{    text-align:center;}.container ul{    list-style:none;    margin:0;    padding:0;    display:inline;}.container li{    margin-right:8px;    display:inline;}</style>

Copy after login

The advantage of this method compared to the first method is that it does not need to add semantic tags and simplifies the nesting depth of tags. However, there are also some problems: it changes the display type of block elements to inline, turning them into inline elements. , so some functions are missing, such as setting the length value.

3.HTML code

By setting float for the parent element, then setting position:relative and left:50% for the parent element, and setting position:relative and left:-50% for the child element. Achieve horizontal centering.

The code is as follows:

<body><div class="container">    <ul>        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>    </ul></div></body>

Copy after login

css code:

<style>.container{    float:left;    position:relative;    left:50%}.container ul{    list-style:none;    margin:0;    padding:0;        position:relative;    left:-50%;}.container li{float:left;display:inline;margin-right:8px;}</style>

Copy after login

This method can retain block elements and still display them in the form of display:block. The advantage is that it does not add silent discussion tags and does not increase the nesting depth. However, its disadvantage is that position:relative is set, which brings certain side effects.

These three methods are widely used and each has its own advantages and disadvantages. Which method to choose depends on the specific situation.