Home > Developer > Web Develop
Text-align center and float supplement, text-alignfloat
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.
What is the difference between text-align and float?
To put it simply, text-align controls the display of text, and flaot controls the display of a container. For example, <div> </div> if you want to control the Left and Right floating mode of the block, you can use float <div> Binbin bing bin </div> to align the left and right of the content. method, you need to use text-align. just remember a little container (div ....) the content in float can be designed with text-align to meet w3c requirements.
How to use float, left, text-align, and align in html?
Float and text-align are css styles.
1. float
The float attribute defines the direction in which the element floats. In the past, this attribute was always applied to the image, so that the text is centered around the image. However, in CSS, any element can float. A floating element generates a block-level box, regardless of its own elements.
If the floating non-replacement element is used, a specific width should be specified; otherwise, they will be as narrow as possible.
Note: if there is only a small amount of space on top of a row for floating elements, this element will jump to the next row, and this process will continue until a row has enough space.
Instance:
Float the image to the right:
Img
{
Float: right;
}
2. left
Left is the property value, float: left, text-align: left is different
3. text-align
The text-align attribute specifies the horizontal alignment of text in an element.
This attribute sets the horizontal alignment of text in block-level elements by specifying the point to which the row box is aligned. The value of justify can be supported by allowing the user agent to adjust the interval between letters and words in the row content. Different user agents may obtain different results.
Instance
Set the text alignment of elements h1, h2, and h3:
H1 {text-align: center}
H2 {text-align: left}
H3 {text-align: right}
4. align
The align attribute specifies the horizontal alignment of the content in the element.
Instance
The following HTML table align the content in the tbody element to the right:
<Table border = "1" width = "100%">
<Thead>
<Tr>
<Th> Month </th>
<Th> Savings </th>
</Tr>
</Thead>
<Tbody align = "right">
<Tr>
<Td> January </td>
<Td> $100 </td>
</Tr>
<Tr>
<Td> February </td>
<Td> $80 </td>
</Tr>
</Tbody>
</Table>
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
