CSS implements horizontal centering of elements_html/css

CSS implements horizontal centering of elements_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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

Original

1053 people have browsed it

CSS implements horizontal centering of elements

Elements are mainly divided into block-level elements and inline elements, so the horizontal centering of elements can also be discussed in these two situations. In addition, the implementation of block-level elements is more complicated and will be discussed separately. .

1. Inline elements

Commonly used inline elements are a/img/input/span, etc. HTML text within tags also falls into this category. For such cases, horizontal centering is achieved by setting text-align:center on the parent element.
HTML structure:

<body>  <div class="txtCenter">    Hello World!!!  </div></body>

Copy after login

CSS style:

<style>  div.txtCenter{    text-align:center;  }</style>

Copy after login

2. Block-level elements

Commonly used block-level elements are div/table/ul/dl /form/h1/p etc. According to different application scenarios, it is divided into two situations: fixed-width block level and variable-width block level, which are discussed separately.

1. Fixed-width block-level elements

Elements that meet the two conditions of **fixed-width** and **block-shaped** can be set by setting the "left and right margin" value to "auto"** to achieve centering.
HTML structure:

<body>  <div>    Hello World!!!  </div></body>

Copy after login

CSS style:

<style>  div{    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/    width:500px;/*定宽*/    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */  }</style>

Copy after login

2. Variable-width block-level elements

We often encounter variable-width block-level elements For use in paging navigation, because the number of paging is variable, it cannot be limited by width. At this time, there are three main ways to center the element horizontally:

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

2.1 Add the table tag

Step one: outside the centered element that needs to be set Add a table tag (including , , ).

Step 2: Set "left and right margin:auto" for this table (this is the same method as the fixed-width block element).
HTML structure:

<div>  <table>    <tbody>      <tr><td>        <ul>          <li><a href="#">1</a></li>          <li><a href="#">2</a></li>          <li><a href="#">3</a></li>        </ul>      </td></tr>    </tbody>  </table></div>

Copy after login

CSS style:

<style>  table{    margin:0 auto;  }  ul{list-style:none;margin:0;padding:0;}  li{float:left;display:inline;margin-right:8px;}</style>

Copy after login

** The disadvantage of this method is that it adds unsemantic HTML tags and increases the nesting depth

2.2 Set display; inline method

Change the display of block-level elements to inline type, and then use text-align:center to achieve the centering effect.
HTML structure:

<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 style:

<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 disadvantage of this method is that the display of the block-level element is set to inline, so there is a lot less Functions, such as box model

2.3 Set position:relative and left:50%;

By setting float to the parent element, and then setting position:relative and left:50 to the parent element %, the child element sets position:relative and left:-50% to achieve horizontal centering.
HTML structure:

<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 style:

<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, without adding any advantages The silent discussion tag does not increase the nesting depth, but its disadvantage is that position:relative is set, which brings certain side effects.

The three methods have their own advantages and disadvantages, and they should be selected according to the actual situation.