Summary and Comparison of CSS Mainstream Layouts (1) centered text alignment

Posted on Edited on In Waline:

As a front-end development, perennial focus on JS, CSS did not form a systematic knowledge of the context, take this opportunity to summarize several mainstream layout centered text alignment of different implementations and comparisons between the programs.

Parent text-align

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
< html long = "and" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent {
            width: 100%;
            height: 200px;
            background-color: aliceblue;
            text-align: center;
        }

        #child {
            width: 200px;
            height: 200px;
            background-color: red;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>
</body>
</html>

Principle

text-align

The’text-align ‘CSS property defines how the inline content (such as text) is aligned relative to its block parent element.’ text-align 'does not control the alignment of the block element itself, only the alignment of its inline content. For specific value ranges, please refer toMDN

display

The display property sets the element’s internal and external display types. The outer display types of the element will determine whether the element is displayed in流式布局Performance in (块级或内联元素The inner display types of an element can control the layout of its child elements (for example:flow layout，grid Or flex）。

The’display 'attribute is specified using keyword values, which are divided into six categories:

1
2
3
.container {
  display:  [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
}

I won’t introduce it specifically. If you are interested, you can also go to MDN to look through it one by one.

Briefly introduce three of them:

display-outside

These keywords specify the external display type of the element, which is actually its role in streaming layout (that is, its performance in streaming layout).

This is the inline, block, etc. we commonly use this time.

display-inside (en-US)

These keywords specify the internal display type of the element, and they define how the internal content of the element is laid out (assuming the element is a non-replaced element).

Common ones are flow, flex, table, grid, etc

display-legacy

CSS 2 uses single-keyword syntax for the display property, and separate keywords for block-level and inline-level variants of the same layout pattern. Common are inline-block, inline-flex

Summary

So in summary, why this scheme can take effect, the first is that the value of the child’s display is inline-block, which is a display-outside type, which defines its external display type, that is, the type for the parent is an inline block-level element. The main thing here is inline, the block-level element is just to make the width and height take effect, and then the function of the parent’s text-align is to define the alignment of the internal elements.

Advantages

Browser compatibility is good, ie6 can also support, because text-align and inline-block are both CSS2 content

Disadvantage

  • text-align has inheritance, that is, the text of the child element is also centered. If you don’t want the text of the child element to be centered, you need to reset the text-align attribute in the subset element

Sub table

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
< html long = "and" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent {
            width: 100%;
            height: 200px;
            background-color: aliceblue;
        }

        #child {
            width: 200px;
            height: 200px;
            background-color: red;
            Display: table;//or block
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>
</body>
</html>

Principle

display

The display mentioned above is still used here, and the table of type’display-inside 'is

margin

The’margin 'property accepts 1~ 4 values. Each value can be ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/length)，[, or’auto '. When the value is negative, the element will be closer to the neighboring element than before.

  • When only one value is specified, that value is uniformly applied to the outer margins of all four sides.
  • When you specify two values, the first value is applied to the top and bottom margins, and the second value is applied to the left and right margins.
  • When you specify three values, the first should be applied to the top, the second to the right and left, and the third to the margins below.
  • When ** four ** values are specified, in order (clockwise) as the outer margins of ** top **, ** right **, ** bottom **, and ** left **.

Available values:

length

Take a fixed value as the outer margin.

percentage

Relative to包含块The * width * of, as a percentage of the outer margins.

auto

Let the browser choose an appropriate margin. Sometimes, in some special cases, this value can center the element.

Advantages

Only need to set the child elements.

Disadvantage

If the child element is out of the doc stream, causing the margin attribute to be invalid

Way to get out of doc stream

子position:absolute

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
< html long = "and" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent {
            width: 100%;
            height: 200px;
            background-color: aliceblue;
            /* As long as it is not static by default */
            position:relative;
        }

        #child {
            width: 200px;
            height: 200px;
            background-color: red;
            position:absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>
</body>
</html>

Principle

position

The CSS position property is used to specify how an element should be positioned in the doc.top，right，bottom And left Attribute determines the final position of the element.

  • ** Positioned element ** is its计算后An element whose positional attribute is relative, absolute, fixed, or sticky (in other words, anything other than static).
  • **** relatively positioned element ****）**计算后Elements whose position attribute is’relative '.
  • ** Absolutely positioned element ** Yes计算后Elements with positional attributes of’absolute ‘or’fixed’.
  • ** （ stickily positioned element ****）**计算后Elements with the positional attribute sticky.

In most cases,heightAndwidth Absolutely positioned elements set to auto are resized according to their content size. However, absolutely positioned elements can be resized by specifyingtopAndbottom , retainheightUnspecified (i.e., ‘auto’), to fill the available vertical space. They can also be specified by specifyingleft And rightAnd willwidth Specify’auto 'to fill the available horizontal space.

Except for the case just described (absolutely positioned elements fill the available space):

  • If both top and bottom are specified (strictly speaking, the value specified here cannot be auto), top takes precedence.
  • If’left ‘and’right’ are specified, when directionWhen set to ltr (horizontal Chinese, English), left takes precedencedirectionWhen set to rtl (writing from right to left in Arabic, Hebrew, Persian), right takes precedence.

Relatively positioned elements are not separated from the doc stream, while absolutely positioned elements are separated from the doc stream. Absolutely positioned elements do not occupy space when arranging other elements in the doc stream.

Absolutely position the element relative to the * nearest non

transform

The CSS transform property allows you to rotate, scale, tilt, or translate a given element. This is achieved by modifying the coordinate space of the CSS visual formatting model. For details, please take a lookMDN

Advantages

Whether the parent element is separated from the doc stream does not affect the centering of child elements

Disadvantage

Transform is a new feature of CSS3, compatibility needs to be considered