Example analysis of three methods in CSS for two-way alignment

When it comes to aligning the two sides, we are not unfamiliar, in Word, PowerPoint, Outlook and other interface navigation, in fact, there is a two-pronged (decentralized) button, usually not much use, we are more accustomed to the left-aligned, center-aligned, right-aligned way to align the text or module of the page.

Since the advent of responsive web design, it has become more and more important to use percent-cloth-adaptive layouts, especially on the mobile side, to justify the two-pronged approach. So, how to use CSS to achieve the two-way alignment, I believe a lot of alumni text alignment of the text-align:justify, this is one of the ways to speak today, there are two more exciting ways to achieve, please look down ~

Is the need to implement the demo, take the width of 320px, 480px, 640px under, that is, with the browser window width adjustment, button menu height unchanged, the width will be proportional to automatic adaptation, and left and right justified:

Catalog (Updated on 20161028)

• Using Text-align:justify

• Using Justify-content:space-between
  

• Use column (multi-column layout)

• Mobile text Both ends of the alignment example (new)

Method One: Use Text-align:justify

Thanks to the program provided by the join students, the program can be compatible with all browsers , but the implementation will be more complex, and with hack taste

The Text-align:justify property is fully compatible, uses it to justify both ends, and needs to be aware of the need to add [space/newline/tab] between modules to work, and also to implement text alignment by adding [spaces/Line breaks/tabs] between words ] to work

Html:

The elements within the <p> module are &nbsp; delimited, only support WebKit and Gecko Kernel browser </p><br/><p class= "demo" ><a class= "link" href= "#none" >10 yuan </a>&nbsp;<a class= "link" href= "#none" >20 yuan </a>&nbsp;<a class= " Link "href=" #none ">30 yuan </a>&nbsp;<a class=" link "href=" #none ">50 yuan </a></p><br/ Line break between elements in the ><p> module </p><br/><p class= "Demo" > <a class= "link" href= "#none" >10 yuan </a > <a class= "link" href= "#none" >20 yuan </a> <a class= "link" href= "#none" >30 yuan </a> <a clas s= "link" href= "#none" >50 the element in the &LT;/A&GT;&LT;/P&GT;&LT;BR/><p> module is a space character </p><br/><p class = "Demo" ><a class= "link" href= "#none" >10 yuan </a> <a class= "link" href= "#none" >20 yuan </a> <a class= "link" href= "#none" >30 yuan </a> <a class= "link" href= "#none" >50 yuan </a></p><br/> There is no delimiter between elements within the <p> module, justify does not work </p><br/><p class= "Demo" ><aclass= "link" href= "#none" > Options 1</a><a class= "link" href= "#none" > Options 2</a><a class= "link" href= " #none > Options 3</a><a class= "link" href= "#none" > Options 4</a></p><br/>

Css:

{:;:;} {:;:;:;:;} {:;} {:;:;:;:;:;:;} {:;:;:;:;:;:;:;:;:;:;:;:;:;:;}

Method Two: Use Justify-content:space-between

Box-pack is a new property of CSS3, dependent on Display:box (Legacy Flex Layout), affected by Box-orient, Box-pack determines the way sub-labels are aligned horizontally, selectable values have start | End | Center | Justify It is very simple to use box-pack:justify to justify both ends, and the amount of code is small. In order to forward the line, the Display:flex (the new version of the flexible layout) also write in ~

If it is done based on the WebKit kernel webapp development and Winphone IE10 and above, then everything is good to run ~

About the box model layout, here is an article "CSS Box-flex properties, and then elastic box model Introduction", write well, recommend to everyone ~

Html:

<p class= "Demo" >    <a class= "link" href= "#none" >10 yuan </a>    <a class= "link" href= "#none" > 20 RMB </a>    <a class= "link" href= "#none" >30 yuan </a>    <a class= "link" href= "#none" >50 yuan </ A></p>

Css:

*{margin:0;padding:0;} /* Description: After Display:box defines the layout as a box model, you can use the Box-pack:justify property under the box model to */.demo{    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;}. Demo a{     width:20%;     Display:block;     height:44px;     line-height:44px;     Text-align:center;     border:1px solid #428cc8;     Color: #666;     font-size:16px;     margin-bottom:5px;     border-radius:3px;     Background-color: #fefefe;     Background-image:-webkit-gradient (linear,left top,left bottom,color-stop (0, #fefefe), Color-stop (1, #eee));     Color: #666;     Text-decoration:none;}

Method Three: Use column (multi-column layout)

Column is also a CSS3 attribute, meaning multi-column layout, using column to achieve the two ends of the alignment is also very simple, only need to set the number of modules with column number of columns consistent, but its automatic adaptation with the use of box-pack there is a little difference, is not very standard, The spacing between columns and rows cannot be defined as a percentage. It is gratifying to support all advanced browsers at present, support for IE10 is also good, and IE9 and the following versions are not supported , WebApp development, for the need to not be compatible with Winphone7 Mobile (IE9) needs, can give full play to the powerful role of the column ~

Html:

<p class= "Demo" >    <a class= "link" href= "#none" >10 yuan </a>    <a class= "link" href= "#none" > 20 RMB </a>    <a class= "link" href= "#none" >30 yuan </a>    <a class= "link" href= "#none" >50 yuan </ A></p>

Css:

*{margin:0;padding:0; /* Description: 1.column-count defines the number of columns of the object, with 4 modules defined as 4 columns 2.column-gap defines the spacing of columns and columns in the object, the spacing cannot be set to a percentage and is not flexible enough */.demo{-     Webkit-column-count:4;-moz-column-count:4;column-count:4; -webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;     }.demo a{Display:block;     height:44px;     line-height:44px;     Text-align:center;     border:1px solid #428cc8;     Color: #666;     font-size:16px;     margin-bottom:5px;     border-radius:3px;     Background-color: #fefefe;     Background-image:-webkit-gradient (linear,left top,left bottom,color-stop (0, #fefefe), Color-stop (1, #eee));     Color: #666; Text-decoration:none;}