Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to achieve CSS alignment". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to achieve CSS alignment.

Flex

The elastic box model flex, as a powerful flexible layout, can hold most of the layout effects, including the alignment of both ends. You can use the spindle to align both ends of the justify-content 's alignment property space-between

Justify-content: space-between

If you want to consider the compatibility of the three versions of flex, use the following code

[note] IE9- browsers do not support

. justify-content_flex-justify {- webkit-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between; justify-content: space-between;} body {margin: 0;} ul {margin: 0 margin padding: 0 margin Listure style: none;} .list {width: 200px Singapore: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;} .in {background-color: lightblue;padding: 0 10px }. Display_flex {display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display: flex;}. Display_flex > * {display: block;}. Justify-content_flex-justify {- webkit-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;} content style behavior text-align

Horizontal alignment text-align itself has an attribute value that is justify aligned at both ends. It is important to note, however, that when you use it for end-to-end alignment, you need to pay attention to adding spaces (including spaces, newlines, tabs) between elements to work. Because there are line breaks between elements in the HTML structure, there is no need to add additional white space characters

But only in this way, the element cannot achieve the effect of alignment at both ends.

The element must occupy a full line, as shown below. Elements that occupy a full line can be aligned at both ends, while elements that are not full cannot be achieved.

[text-align-last]

Obviously, none of the above meets the requirements, so you need to use the property text-align-last, which specifies how to align the last line of the text

So replace the text-align attribute with text-align-last. However, to be compatible with IE browsers, you need to set text-align:justify at the same time

[note] safari, IOS and androis4.4- browsers are not supported

Body {margin: 0;} ul {margin: 0 position padding: 0 position list style: none;} .list {width: 200px politics: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px political text match: justify;text-align-last: justify;} .in {background-color: lightblue;padding: 0 10pxscape displayhouse line line block. content style behavior

[after pseudo elements]

Using text-align-last can achieve the effect of end-to-end alignment, but the compatibility is not good. By setting the pseudo element: after for the parent element, and setting inline-block for the pseudo element, and setting the width 100%, it is equivalent to the pseudo element: after is squeezed to the second line. As a result, the original element occupies the first line, triggering the effect of alignment at both ends

It should be noted here that because whitespace is resolved to newline, you can solve the redundant newline problem by setting the height height of the parent element and overflowing it to hide it.

Body {margin: 0;} ul {margin: 0 position padding: 0 position list style: none;} .list {width: 200px position height: 30px political scene: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px political textMutual align: justify;} .in {background-color: lightblue;padding: 0 10px display displayin line line block;} .list: after {content: "; width:100%;display:inline-block;} content style behavior column

A similar effect can be achieved using a multi-column layout column. Column-count defines the number of columns of an element. In the example, there are three child elements, so it is defined as three columns. It is particularly important to note that the child element needs to be set to the block element to take effect.

[note] IE9- browsers do not support

Body {margin: 0;} ul {background-color: lightblue;padding: 0 center; padding: 0 center; listing style: none;} .list {width: 200px scape: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30pxText text match: col3 {- webkit-column-count:3;-moz-column-count:3;column-count:3;} .in {background-color: lightblue;padding: 010pxscape displayblock;} content style behavior

If the vertical bar is needed between the child elements, and the vertical bar height is the same as the child element height, using column-rule can easily realize the requirement.

Body {margin: 0;} ul {margin: 0 center; padding: 0 center; listing style: none;} .list {width: 200px center;: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30pxText: center;} .col3 {- webkit-column-count:3;-moz-column-count:3;column-count:3;}. Col-rule {- webkit-column-rule: 1px solid black;-moz-column-rule: 1px solid black;column-rule: 1px solid black } .in {background-color: lightblue;padding: 010pxscape displayblock;} content style behavior Thank you for your reading. This is the content of "how to achieve CSS alignment". After the study of this article, I believe you have a deeper understanding of how to achieve CSS alignment, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.