1. Table method
First step: Add a table label (including <tbody>, <tr>, <td>) to the center of the element you want to set.
Step two: Set the "left and right margin center" for this table (this is the same as for a fixed-width block element).
2. Display:inline method
Change the dispaly of the block-level element to the inline type, and then use the text-align:center to achieve the centering effect.
Style>.container{text-align:center;}. Container ul{list-style:none;display:inline;}. Container li{display:inline;} </style>3. Float method
By setting float for the parent element and then setting position:relative and left:50% for the parent element, the child elements are set position:relative and left:-50% to achieve horizontal centering.
<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><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>
Indeterminate width element centered
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
