Css alignment at both ends ~, Css alignment ~

Css alignment at both ends ~, Css alignment ~

Today, we encountered the situation of alignment between the upper and lower fields, such as the mobile phone number and user name.

Then I found related methods on the internet today and found that there is no good solution, especially when compatibility is required. I found two methods that I think are relatively good:

Method 1: text-align, text-justify, which is displayed on situ zhengmei's blog;

You need to set text-align to justify. text-justify is more complex. The values of IE are as follows:

• Auto: allows the browser user agent to determine the two-end alignment rules used
• Inter-word: Align text by adding spaces between words. This behavior is the fastest way to align all text rows. The alignment at both ends of the paragraph is invalid for the last line of the paragraph.
• Newspaper: Align text by adding or removing spaces between words or letters. Is the most precise format used for alignment at both ends of the Latin alphabet
• Distribute: Processing spaces is similar to newspaper. It is applicable to East Asian documents. Especially Thailand
• Distribute-all-lines: the two ends are in the same way as distribute, and they do not contain the last line of the two section alignment. Applies to ideographic documents
• Inter-ideograph: provides full two-end alignment for ideographic text. He adds or removes spaces between ideographic words and words.

However, it was first implemented as a private Implementation of IE, such as text-overflow and overflow-x. It was implemented very late in FF, in other words, there was a strict compatibility problem. And FF, chrome needs to manually insert blank or soft line feed labels between Chinese characters to take effect, the resistance encountered in chrome is even greater.

.test1 {      text-align:justify;      text-justify:distribute-all-lines;/*ie6-8*/      text-align-last:justify;/* ie9*/      -moz-text-align-last:justify;/*ff*/      -webkit-text-align-last:justify;/*chrome 20+*/  }  @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/      .test1:after{          content:".";          display: inline-block;          width:100%;          overflow:hidden;          height:0;      }  }

I tried this method and found that there are still some problems. It is the block element required by test1. If it is an airline label, I need to set display: block;

Article: http://www.cnblogs.com/rubylouvre/archive/2012/11/28/2792504.html

 

Method 2: This was accidentally seen. I thought about it before, but I never did it. I didn't expect someone to do it.

It is done by using the table method as a table, so that the text will be evenly split. (O (∩ _ ∩) O Haha ~ Don't despise me !)

You can also set the display: table attribute similarly:

Set display: table at the table layer, and set display: table-cell at the td layer.

Of course, the principle is the same. In this case, each word needs to be separated by an outer box. The method is really good, but it feels quite BT.