Home > Developer > Web Develop
Problems and scenarios:
Text is centered when the content can be displayed in a box in a row.
Text is left-aligned when it is displayed in a box when there is too much content to be wrapped.
In fact, this visual demand is quite common. For example, for pop-up prompts, when the content is relatively young, the content is centered in the popup box, the content is relatively long, content left-aligned. But its pure CSS implementation is a bit cumbersome, generally let go of this demand, or, using JS implementation.
Solution:
The CSS implementation code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title></Head><style> /*when the text is a line, then the width of p is less than the width of the Div, the P label is centered in the box, and the text is centered; when the width of P is the same as the width of the div when it is greater than one line, the text is left aligned.*/. Content{width:200px;Border:1px solid #ee2415;text-align:Center;padding:2px 5px} /*Display:inline-block the width of the p is scaled according to the width of the text*/. Content P{text-align: Left;Display:Inline-block}</style><Body><Divclass= "Content"> <P>Content is centered only on one line</P></Div><BR><Divclass= "Content"> <P>Content multiline left justified, content multiline left</P></Div></Body></HTML>
The effect is as follows
CSS implements a single line of text centered, multiline text left-aligned
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
