The center attribute of text-align has the following features:
1. Apply the text-align center to a container. It only targets the text in the container and the display in the container as inline or inline-block, if the container display is block, the container is not centered.
2. Text-align is downstream and will be continuously transmitted to child elements.
<Style>. div1 {text-align: center; width: 100%; Height: 200px; Background: #9f0 ;}. div2 {display: block; width: 200px; Height: 50px; Background: # 00f;} span {display: inline-block; Height: 100px; Background: #0f0 ;} h1 {display: inline; Background: # f00 ;} </style> <body> <Div class = "div1">
The comparison between blue and red indicates that the center can act on the elements whose display is inline, but cannot act on the elements whose display is block.
The comparison between blue and green indicates that the center can act on the elements whose display is inline-block, but cannot act on the elements whose display is block.
Text comparison between blue and blue indicates that the center can act on text and has the characteristics of passing to sub-containers.
2. Float only acts on the container itself, does not act on the elements in it, and does not have the transmission property.
<Style>. div1 {width: 100%; Height: 200px; Background: # CF0; float: Right ;}. div2 {width: 100px; Height: 100px; float: Right; Background: #0f0 ;}. div3 {width: 100px; Height: 100px; Background: # f00 ;} </style> <body> <Div class = "div1"> I want float <Div class = "div2"> </div> <Div class = "div3"> </ div> </body>
Comparing text with red and green indicates that float can act on the container itself, but cannot act on or transmit content in the container.
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
