This is the first day of my participation in the August Challenge. For details, see:August is more challenging

preface

In front end development, often encounter horizontal or vertical center text, elements, and so on, here do a summary of common solutions, in the middle of other methods to explore and summary.

The CSS is horizontally centered

1. Centered inline elements or inline block elements (horizontally centered text).

You can add a text-align attribute to its parent element: center. You can also set the value of the text-align property to left and right for left-align.

CSS styles

.align-center{
    height: 100px;
    background-color: lightcoral;
    
    /* Level in the middle */
    text-align: center;
}
Copy the code

The HTML element

<div class="align-center">Horizontal center</div>
Copy the code

2. The element (box, container) itself is centered (using margin)

If you center an element (box, container), rather than the text inside the element, you can do this as follows.

Method premise:

  • The box must specify width.
  • The left and right margins of the box are set to auto.
.align-center {
    height: 100px;
    width: 100px;
    background-color: lightcoral;

    /* Method 1 horizontal center */
    margin: 0 auto;
    
    /* method 2 margin:auto; * /
    
    /* method 3 Margin-left :auto; margin-right:auto; * /
}
Copy the code
<div class="align-center"> 
</div>
Copy the code

The CSS is vertically centered

1. A single line of text is vertically centered

Using line-height, the value of its attribute is set to the same height of the container to achieve the vertical center of a single line of text.

CSS code

.heigt-center {
    height: 100px;
    background-color: lightgreen;
    line-height: 100px;
}
Copy the code

The HTML code

<div class="heigt-center">Vertical center</div>
Copy the code

2. Vertical alignment of pictures and text (mostly used for profile picture and name)

Usage scenario: Generally, when making web pages, you need to make the profile picture and name horizontally centered. You can use the following methods to achieve this.

Note:

  • Vertical-align: middle; vertical-align: middle;

  • This attribute needs to be set to the inline block element for the following text to be valid.

img {
    border-radius: 25px;
    width: 50px;
    height: 50px;
    
    vertical-align: middle;
}
Copy the code
<body>
    <div class="head">
        <img class="" src="img/head.jpg" />Son not fish</div>
</body>
Copy the code

The CSS is horizontally and vertically centered

Horizontal and vertical centering is usually implemented with three lines of code from.content below, but can be implemented with two simpler lines of code from.content2.

CSS styles

.content{
    height: 100px;
    background-color: skyblue;

    /* Horizontal and vertical center */
    display: grid;
    align-items: center;
    justify-items: center;
}

.content2{
    height: 100px;
    background-color: lawngreen;

    /* Horizontal and vertical center */
    display: grid;
    place-items: center;
}
Copy the code

The HTML element

<div class="content">
    <p>Horizontal and vertical center text</p>
</div>

<div class="content2">
    <p>Horizontal and vertical center text</p>
</div>
Copy the code