Summary of horizontal center-the method of undefined block elements and the method of center summary block elements
Original article: http://www.imooc.com/code/6363
In actual work, we will encounter the need to set the center for "block elements with an indefinite width", for example, paging navigation on the webpage, because the number of pages is uncertain, therefore, we cannot limit its elasticity by setting the width.
There are three ways to center a block element with an indefinite width (these three methods are currently used more ):
Method 1:
Step 1: Add a table label (including <tbody>, <tr>, and <td>) to the element to be set ).
Step 2: Set "left and right margin Center" for the table (this is the same as the method for fixed width block elements ).
Example:
Html code:
<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 code:
<style>table{ margin:0 auto;}ul{list-style:none;margin:0;padding:0;}li{float:left;display:inline;margin-right:8px;}</style>
Method 2:
Change the display of block-level elements to the inline type, and use text-align: center to center the elements. Example:
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>
Compared with the first method, this method does not add silent labels, which simplifies the nested depth of labels. However, there are also some problems: it changes the display type of block elements to inline, it becomes a line element, so some functions are missing, such as setting the length value.
Method 3:
Set float for the parent element, set position: relative and left: 50% for the parent element, and set position: relative and left:-50% for the child element to realize horizontal center.
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>
In this method, block elements can be retained and still displayed in the form of display: block. The advantage is that the table label is not added and the nested depth is not added. However, the disadvantage of this method is that the position: relative is set, it brings some side effects.
These three methods are widely used and have their own advantages and disadvantages. The specific method can be determined based on the actual situation.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
