What are the ways to center images in css

Methods to center CSS images: 1. Use the "text-align: center;" style; 2. Use the "margin: 0 auto;" style; 3. Use flexible box layout; 4. Use grid layout ; 5. Use absolute positioning to align; 6. Use the background attribute to center the background image.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

html

 <div id="pic">
        <img  src=star.jpg class="logo" alt="What are the ways to center images in css" >
 </div>

1. (The simplest) Text attribute alignment text-align

text-align control element Chinese The alignment of this row. You can set a parent div in img, so that img can be the text of the div, and then use text-align to modify the div attributes. (Add attributes to the parent element)

Note: The child element must be inline or inline-block; if the child element is also a div, you need to set display: inline/inline-block for the child element . The child element img here is inline, so this step is omitted. This method is suitable for inline elements. For example, img is centered

css

#pic {
    text-align: center;   /*表示div的子元素居中*/
}

2. Use margin

css

img {
    display: block;    
    width: 100px;
    margin: 0 auto;
}

and above Three points are indispensable.

margin: 0 auto; The prerequisite for centering is:

• Inline elements must be set to display: block; img must be set to inline elements set up. If it is input, it does not need to be set.

• Elements must have width; except those with built-in width, such as button and input.

According to the premise, there is another method - modifying the parent element attributes

#pic {
    width: 100px;
    margin: 0 auto;
}    /*父元素div属于block，所以不用再设 display: block;*/

In summary, this method is suitable for block elements. For example, the centering of div and input

Limitations of margin: When displaying two images in one line, the margin needs to be modified accordingly.

3. Flexible box layout

css

#pic {
    display: flex;   
    justify-content: center;
    }

Flexible box layout can use a few lines of css to achieve almost any layout. And the most amazing thing is that even the top two rows of n pictures can be centered, without having to consider the picture layout and position.

4. Grid layout

Flexible boxes are most commonly used in navigation bars. In contrast, grid layout is a universal layout system.

#pic {
    display: grid;   
    align-items: center;     /*块级方向（纵向）上的全部栅格元素居中对齐*/
    justify-items: center;  /*行内方向（横向）所有的元素中线对齐*/
}

So it is very convenient to deal with the problem of aligning multiple pictures.

5. Alignment in absolute positioning

css

#pic {
    position: relative;   /*设置绝对定位元素（img）的容纳块，如果不设置，那么容纳块默认为body*/
}
.logo {
    position: absolute;   
    right: 1em; left: 1em;     //表示左右距离相等
    margin: 0 auto;         //与方法二相似
}

The biggest difference from method two is that the usage of margin is for block elements. If you use position, you don't need to set block. However, position is generally used in frame layout. If it is just to center the picture, it is overkill and troublesome. Not recommended.

6. The background image is centered

#html

<div></div>

css

div {
    height: 1000px;  /*高度非常重要*/
    background: url(star.jpg) no-repeat top center; 
}

Premise: As long as the element content is empty, it must Set height. Because the div content is empty, the height must be set, otherwise the div will have no space, and the background image will not be displayed. If it's a body, you don't need it, because the body has its own height.

The limitation of setting it as a background image is that you cannot set the attributes of images such as hyperlinks, title, alt, etc. If it is not a background image, try not to use this format.

(Learning video sharing: css video tutorial)

The above is the detailed content of What are the ways to center images in css. For more information, please follow other related articles on the PHP Chinese website!