Horizontal alignment

text-align: start | | endleft | right | center | justify | match-parent | justify-all
Copy the code

• Applies to: Block containers
• Left: left-align content.
• Center: align the content in the center.
• Right: Align content to the right.
• Justify: The content is aligned at both ends, but does not justify forced breaks (the broken line) or the last line (including only one line of text, because it is both the first and last line). (range)
• Start: Align the content with the start boundary. (range)
• “End” : align the content with the end boundary. (range)
• Match-parent: this value is the same as inherit, except that the start or end keyword is calculated for the parent’s <‘ direction ‘> value. The calculated values can be left and right. (range)
• Context-all: The effect is equivalent to justify, but also aligns the last line. (range)

/ / test the justify.justify {
    text-align: justify;
}
 
<div class="justify">
    WASHINGTON - US President Donald Trump and the top leader of the Democratic People's Republic of Korea (DPRK), Kim Jong Un, are scheduled to meet at 9:00 am Singapore time on June 12, the White House said on Monday. At a press briefing, White House spokesperson Sarah Sanders also said that the U.S. advance team now in Singapore "is finalizing logistical preparations and will remain in place until the summit begins." Noting that the US side is "actively" preparing for the meeting, she said that the US delegation in the demilitarized zone (DMZ) along the inter-Korean border continues diplomatic negotiations with the DPRK delegation. "The discussions have been very positive and significant progress has been made," she said. Besides the exchanges in Singapore and the DMZ, US Secretary of State Mike Pompeo last week met with Kim Yong Chol, vice chairman of the DPRK's ruling Workers' Party of Korea Central Committee, in New York.
</div>
 
Copy the code

Let’s take a look at the current results:



​

Currently, the text on the page is aligned at both ends, but it can be seen from the content in the red box of the picture that word islands appear. When the text is aligned at both ends, the word spacing needs to be adjusted, and the “word islands” phenomenon occurs. The result not only looks bad, it damages readability. There are several ways to implement character line breaking on web pages, but the results are pretty poor. The diagram below:

.justify {
    text-align: justify;
    word-break:break-all;           
}
Copy the code

CSS Text (version 3) introduces a new property 登 记. It accepts three values: None, manual, and auto. Manual is its initial value, and its behavior corresponds exactly to the existing way of working: we can manually insert a soft hyphen at any time to achieve the effect of hyphenation. Obviously 登 记 : None; Disables this behavior. However, the Chorme browser does not support the current properties, the specific properties can be queriedcaniuse. And we have to addword-wrap:break-word;Use together.

.justify {
    text-align: justify;
 
    word-wrap:break-word;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
Copy the code

We can see that there are multiple link characters “-” in the red box.

Extension: Where do the heights of block-level elements and inline elements come from?

​

Block-level elements: In cases where height is set, height is used. If height is not set, the content of the block-level element prevails. Content is eventually directed to inline elements (text content in block-level elements is surrounded by anonymous block-level boxes).

Inline elements: Inline elements are complicated, why? The larger the font, the larger the text. It is important to remember that the size of the font does not necessarily affect the height of the contained block-level elements. A specific example of this has already been tested by Daniel, please see the article. The conclusion is that line-height determines the height of the block-level element (if no height is set).

Extension: The content area of the text may be larger than font size

* {
    font-family: "Comic Sans MS";
}
 
.inline {
    font-size: 80px; 
    line-height: 1em; 
    background-color:grey; 
    opacity: 0.7; 
    padding: 0;
}
Copy the code

<div style="background-color: teal;">
  <span class="inline">Test content area draw.</span>
</div>
Copy the code

The code here can see that the current span tag’s line-height is 1em, or 80px. So the height of the parent element is 80px. But the background of the SPAN element is actually larger than 80px, and the actual height tested here is 111px, and the font height changes as the font changes. What’s the reason here?

There may be differences between the EM box and character glyphs of fonts. For most fonts, the height of the EM box is inconsistent with the height of the character glyph.

CSS2.1 states: “The height of the content area should be based on the font, but this GUI fen does not specify how to determine the height of the content area based on the font. Use em boxes or font glyphs “. So there’s a lot of room for the browser to manipulate. The browser controls the height of the content area of the current font.

Align vertically – vertical-align

Vertical-align implements center

The above example uses line-height to center the text box. Recall that this is done by equalizing the upper and lower halves and placing the text box in the vertical center. Again, the baseline of our line model.

Why do I mention baselines? Because the baseline is the initial position of the vertical position of the text. X is the height of the letter x. X is the height of the letter x. X is the height of the letter x. X is the height of the letter x. Remember the four lines and three grids, the center is the baseline + 0.5ex.

At this point we seem to have found the key, which is to move the center line of the current inline content to the baseline + 0.5ex of the parent element’s text content.

Vertical-align :middle aligns the vertical midpoint of the inline element box with 0.5ex above the parent element baseline.

.block-parent{
    background-color: teal;
    height: 200px;
}
 
.first-block-child {
    background-color: gray;
    height: 100px;
    display: inline-block;
    line-height: 100px;
    vertical-align: middle;
    
}
 
.second-block-child {
    background-color: gray;
    height: 200px;
    display: inline-block;
    line-height: 200px;
    vertical-align: middle;
    
}
Copy the code

<h3>Test the vertical-align environment</h3>
<hr/>
<h5>The parent element is a block</h5>
<div class="block-parent">
    <div class="first-block-child">
        first block child
    </div>
    <div class="second-block-child">
         
    </div>
</div>
Copy the code

As shown, I currently center first-block-child based on class as second-block-child.



Conclusion: In fact, the core idea of vertical-align is the inner line frame, which uses different positions of the inner line frame as the baseline to align with the elements we want to adjust the position.

Baseline rules

Baseline is the most important baseline for text position. If we find it, we can handle the position layout of the current text line.

1. The baseline of an inline-table element is the baseline of the first row of its table.
2. The baseline of the parent element line box is the baseline of the last inline box.
3. The baseline determines the rule for the inline-block element

• Rule 1: The baseline of an inline-block element is the baseline of the last element that exists as a content element [inline box], if there is a line box.
• Rule 2: For an inline-block element, if there is no line box inside it or its overflow property is not visible, then the baseline will be the bottom margin of the inline-block element.

Eliminate the white space in the lower part of the above example

To eliminate the white space in the example, we can think of several ways:

• Change the image to a block, which is not affected by the line.
• The space below the text is due to the example between baseline and baseline, so we can consider not showing the example between baseline and baseline in the current text box, that is, reducing line-height. Since the value of line-height is smaller than the value of em, the distance will be reduced in reverse, but the value cannot be negative, otherwise it will not work. This approach is not recommended because distance will still exist from the current document.
• Font size is set to 0 so that lines of text are removed directly and the default base-line is not affected.
• Use other alignment: vertical – align: bottom | vertical – align: middle | vertical – align: top

Words between word spacing

word-spacing:normal | <length> | <percentage>
Copy the code

• Inheritance: Yes
• Normal: default interval
• <length>: Specifies the interval with a length value. It can be negative.
• <percentage>: Specifies the interval as a percentage. It can be negative. (range)

.percentage {     
    word-spacing: 0.5 em; 
}
Copy the code

Compatibility requires attention:

Letter-spacing

letter-spacing:normal | <length> | <percentage>
Copy the code

• Inheritance: Yes
• Normal: default interval
• <length>: Specifies the interval with a length value. It can be negative.
• <percentage>: Specifies the interval as a percentage. It can be negative. (range)

The compatibility is as follows:

The text conversion

text-transform:none | capitalize | uppercase | lowercase | full-width
Copy the code

• Inheritance: Yes
• None: No conversion
• Capitalize: Capitalize the first letter of each word
• Uppercase: Converts each word to uppercase
• Lowercase: Convert each word to lowercase
• Full-width: Converts all characters to fullwidth. If a character does not have a corresponding fullwidth form, it is left as is. This value is commonly used in typesetting ideograms such as Latin characters and numbers. (range)

The compatibility is as follows:

Text is just a little bit more, I’ll talk about it next time, and the concept of inline elements.