CSS for two-pronged alignment effects

CSS for two-pronged alignment effects

Justified, conceptually, is not difficult to understand. If you do not understand what is called justified, you can play word and other office software.

Here's how to implement justification for text. There are several ways I know about this.

Text-align

W3school points out that text-align is used to set the horizontal alignment of text within block-level elements. If you want to align inline elements or inline-block elements, you can use text-align: center the method to center the block element with the Text-align implementation. If you want to center the block element, you can use the margin: auto method.

There is a justify value under the Text-align property to set the justification of the element. However text-align: justify , there are some disadvantages of attributes:

1. The justify effect cannot be achieved under a single line of text.
2. Under multiline text, you cannot achieve the justification effect of the last line of text.

Single-line text

class="keith">unclekeith wanna be a geek!</div>.keith { background-color: lightblue; text-align: justify;}

For multiple lines of text, for example, as we understand it should be shown on the right, but text-align: justify after setting it, it will be displayed as shown on the left. Cannot be the justification effect for the last line of text in Xi ' an.

Workaround

If you want to really achieve the two-pronged alignment effect, you can solve it in the following ways.

解决方法的思路：由于在单行文本下和多行文本下最后一样无法实现两端对齐效果，因此给元素新增一行，即可实现justify的两个不足之处。.keith {    text-align: justify;}.keith:after { display: inline-block; width: 100%; content: ‘‘;}

If you feel that there is more than one empty line, you can set a height for the element and set Overflow:hidden to hide it.

Justify-content

CSS3 The new Flex layout has a Justify-content property that controls the horizontal alignment of the scaling items. There are two values, which can be justified. However, Justify-content has compatibility issues, IE10 above, ff,chrome support. The Text-align property is supported by all browsers

justify-content: space-around。 伸缩项目会平均地分布在伸缩容器内，两端保留一半的空间。justify-content: space-between。伸缩项目会平均地分布在伸缩容器内，第一个伸缩项目在伸缩容器的左边缘，最后一个伸缩项目在伸缩容器的右边缘。

Justify-content:space-around;

Justify-content:space-between

CSS for two-pronged alignment effects