Home > Developer > Web Develop
Source: http://www.imooc.com/code/6365
In addition to inserting the table label in the first two sections and changing the display type of the element, you can center the indeterminate-width block element Horizontally, this section describes the 3 ways to achieve this effect, set the float and relative positioning to achieve.
Method Three: By setting float to 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.
We can understand this: supposedly the parent layer of the UL layer (that is, the DIV layer in the example below) has a split line in the middle of the UL layer of the parent layer (div layer) is divided into two parts, the UL layer of the CSS code is the top left of the UL layer and the parent layer of the UL layer (div layer) line alignment While the LI layer's CSS code is to align the Li Layer's split line with the top left of the UL layer (also the split line of the DIV layer) to achieve the center of the Li Layer.
Example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Horizontal center of variable width block element</title><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;}/*Here is the Code task area*/. Wrap{Clear:both;float: Left;position:relative; Left:50%;}. Wrap-center{background:#ccc;position:relative;margin:0; Left:-50%; }</style></Head><Body><Divclass= "Container"> <ul> <Li><ahref="#">1</a></Li> <Li><ahref="#">2</a></Li> <Li><ahref="#">3</a></Li> </ul></Div><!--Here is the Code task area -<Divclass= "Wrap"> <Divclass= "Wrap-center">Let's take a look at this method.</Div></Div></Body></HTML>
Results such as:
html+css--Horizontal Center Summary-variable width block element method (iii)
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
