Home >Web Front-end >HTML Tutorial >Horizontal centering--inline elements, fixed-width blocks, variable-width blocks_html/css_WEB-ITnose
Horizontal centering--inline elements, fixed-width blocks, variable-width blocks_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:511252browse
Statement: From http://www.imooc.com/learn/9 Learn
Inline elementsIf 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 elementElements 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 widthThere 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>
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;}
2.
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>
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>
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>
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>
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.