Home >Web Front-end >HTML Tutorial >CSS implements horizontal centering of elements_html/css_WEB-ITnose
CSS implements horizontal centering of elements_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:281008browse
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>
CSS style:
<style> div.txtCenter{ text-align:center; }</style> 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>
CSS style:
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ }</style> 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 92cee25da80fac49f6fb6eec5fd2c22a, a34de1251f0d9fe1e645927f19a896e8, b6c5a531a458a2e790c1fd6421739d1c).
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>
CSS style:
<style> table{ margin:0 auto; } ul{list-style:none;margin:0;padding:0;} li{float:left;display:inline;margin-right:8px;}</style> ** 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>
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> 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>
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> 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.