Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to set both ends of text alignment in css". In daily operation, I believe many people have doubts about how to set text alignment in css. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to set text alignment in css". Next, please follow the editor to study!

Setting method: 1, add "text-align: justify;" style to the text element; 2, add "justify-content: space-around;" or "justify-content: space-between;" style to the text element.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Method 1: use the text-align attribute

Suppose we have the following HTML:

In this world, only dreams and good girls can live up to!

Add some style to it.

P {width:500px; border:1px solid red; text-align: justify;}

The initial effect is like this.

Text-align: what is this, justify? In CSS2, text-align has an attribute value of justify, which means alignment. The effect is to align the two ends of a line of text (the content of the text should be more than one line).

But it's still useless just to use it. ..

To align the two ends of the text, we also have to use an inline blank label, such as, and so on, here I use the label

In this world, only dreams and good girls can live up to!

Set the following style for this I tag

Pi {display:inline-block; / * padding-left: 100% padding-left / width:100%;}

Padding-left: both 100% and width:100% can achieve results, just choose one or the other. The effect is as follows

Method 2: use the justify-content attribute

Under the new flex layout of CSS3, there is a justify-content property that controls the horizontal alignment of scaling items. There are two values that can be aligned at both ends.

However, there is a compatibility problem with justify-content. FF,Chrome supports IE10 or above. All browsers support the text-align attribute

Justify-content: space-around . Telescopic items are evenly distributed in telescopic containers, leaving half the space at both ends.

Justify-content: space-between . Telescopic items are evenly distributed in the telescopic container, with the first telescopic item at the left edge of the telescopic container and the last at the right edge of the telescopic container.

At this point, the study on "how to set the alignment between the two ends of the text in css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.