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

This article mainly introduces "what are the methods of css alignment". In daily operation, I believe many people have doubts about the method of css alignment. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what are the methods of css alignment?" Next, please follow the editor to study!

1. Use text-align:justify

The text-align:justify attribute is fully compatible, and you need to add [spaces / newline characters / tabs] between modules to work if you use it to align both ends. Similarly, text alignment requires adding [spaces / newline characters / tabs] between words to work.

/ *

Description:

In order to realize the alignment of two ends of a single line within a block in 1.IE, you need to use its private attribute text-align-last:justify. For text-align-last to take effect, you must first define text-align as justify.

2.line-height:0 solves the extra white space at the bottom of the standard browser container

, /

.content {

Text-align:justify

Text-align-last:justify

Line-height:0

Height:44px

}

/ *

Description:

After the module uses [newline] or [space], the webkit browser will cause the last module to have extra white space, which can be cleared by using font-size:0.

, /

@ media all and (- webkit-min-device-pixel-ratio:0) {

.content {

Font-size:0

}

}

/ *

Description:

1.text-align-last:justify is currently only supported by IE, and standard browsers need to use .demo: after pseudo-class to simulate similar effects.

2.opera browser needs to add vertical-align:top to completely solve the excess white space at the bottom.

, /

.content: after {

Display:inline-block

Overflow:hidden

Width:100%

Height:0

Content:''

Vertical-align:top

}

And the subclass must be an inline-block element

two。 Use box-pack:justify

Parent class container css:

.content {

Display:-webkit-box

Display:-webkit-flex

Display:-ms-flexbox

Display:flex

-webkit-box-pack:justify

-webkit-justify-content:space-between

-ms-flex-pack:justify

Justify-content:space-between

}

And the subclass must be a block element

3. Use column (multi-column layout)

/ *

Description:

1.column-count defines the number of columns of an object

2.column-gap defines the spacing between columns in an object

, /

Parent class container css:

.content {

-webkit-column-count: 2

-moz-column-count: 4

Column-count: 4

-webkit-column-gap: 20px

-moz-column-gap: 20px

Column-gap: 20px

}

And the subclass must be a block element

At this point, the study of "what are the ways to align the two ends of 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.