Look at the two ways of wrapping and horizontal alignment from an example.
There is such an example in the book "CSS World", (mainly examines the understanding of wrapping.)
Wrapping: (adaptive) refers to the size of the element only determined by The internal element is determined, but it is always smaller than the size of the container containing the block.
Requirement : The text content of a module in the page is dynamic, which may be several words or a sentence. It is hoped that when the number of words is small, it is displayed in the center, and the number of words exceeds one line. When it is displayed on the left, ask how to achieve it.
Here we need to know the working conditions of text-align, as shown in the figure: the code to achieve the requirements and its structure have been drawn, and two div boxes are required at this time. According to the summary: [text-align is a written element in the parent element In CSS, there is a property that changes the horizontal alignment of text or inline objects (or class inline elements) of child elements]. The outermost box uses the text-align property, which acts on the content of the child element, but since the content is a block-level element, you must use display:inline-block to change the appearance of the content. Make it an inline skinned block element. At the same time, use text-align: left for the content to display the text inside to the left, but because the content box outside the text is wrapping (that is, its size is determined by the internal elements, which is the internal size that Mr. Zhang said) ), so the size of the content will always be synchronized with the size of the internal text. When the text inside the content is less than one line, the center of the external box will center the content box of the inline-block, when the text content has exceeded one line. At the time, the center of the box has no effect on the content. So it will be displayed on the left. As shown in the figure:
Here is a point of knowledge:
First:
two ways to display horizontally centered: (These two methods have been shared on Weibo earlier, and I will summarize my personal understanding)
1) text-align: center; The text-align property is a property written in a parent element that has an effect on the horizontal alignment of text or inline objects (class inline objects) in child elements.
2) margin: 0 auto; margin is a property that only works on block elements, and it works wherever it is written.