CSS simple image centering

There are many ways to display css in the center of an image, but in many cases some methods are ineffective, which is a headache, such as

General settings for image properties

​text-align:center

Horizontally centered, but this method is often ineffective. Many front-end engineers have studied or searched for it.

CSS image centering method.

But in fact, there are many different situations for CSS image centering, and there are many different solutions. The specific methods are as follows:

Image centering is divided into horizontal centering and vertical centering

Tip: Before you start reading the following content, you can first understand the basics of CSS images.

1. Horizontal centering:

1. To vertically center individual text, we only need to set the CSS style line-height property.

2. The text and the image are in the same row. After setting the div height, set the “img” style of the CSS style image “vertical-align” img{vertical-align:middle;}​.

3. How to set horizontal centering for block-level elements with uncertain widths

(1) is implemented by using table as a container. Of course, this method is not recommended because it adds meaningless tags. Let’s briefly introduce it here. The ​Table​ tag itself is not a block-level element. When we do not set the width of the ​table​, the width inside it is supported by the width of its internal elements. But even if we don’t set the width of the table, we can directly set the outer margin of the table: 0 auto; to achieve horizontal centering! In this way, we can indirectly center the content inside by setting the table to be horizontally centered. Centered.

(2) Compared with the table method, the advantage is that there is no need to add unsemantic tags and the depth of tag nesting is simplified. The idea is like this, by changing the display attribute value of the block-level element to the inline type, and then setting text-align:center to achieve centering. This method also has certain disadvantages. After changing block-level elements to inline elements, inline elements have fewer functions than block elements. For example, setting the length and width values, etc., may have some restrictions in project application, and you can choose by yourself.

(3) By setting float to the parent element, and then setting the position attribute of the parent element to relative and left: 50%; the child element sets position: relative and left: -50% to achieve horizontal centering. The advantage of this is that block-level elements can still be displayed in the form of display: block without adding meaningless tags or nesting depth. It is true that setting position: relative; brings some side effects. The following is an example code of the third method, which can be placed in the body tag.

2. Vertical centering:

For this CSS centering problem, we can use the method of setting a background image. Example:

body {BACKGROUND: url(“image file”) #FFF no-repeat center;}

The key lies in the center attribute, which means centering the background image in the container. You can also change center to top left or write numbers directly to adjust its position.

method one:

Example

div {

width:500px;

height:500px;

border:1px solid #666;

overflow:hidden;

position:relative;

display:table-cell;

text-align:center;

vertical-align:middle;}

try it”

Method Two:

Example

div p {

position:static;

+position:absolute;

top:50%

}

img {

position:static;

+position:relative;

top:-50%;left:-50%;

vertical-align:middle

}

try it”

Method three:

Example

img {

position:static;

+position:relative;

top:-50%;left:-50%;

vertical-align:middle; }

try it”

Method four:

Example

* {margin:0;padding:0;}

div {

width:500px;border:1px solid #666;

height:500px;

background:url(“/statics/images/w3c/intro.png”) center no-repeat;}

try it”

3. Why does text-align:center fail to work when centering a CSS image?

Example

div{

border:1px solid red;

margin:20px;

text-align:center;

}

try it”

4. How to center the image in the DIV both horizontally and vertically?

method one:

Idea: Use the text-align property to center the image horizontally, and then set the padding-top value to center it vertically.

The structure is as follows:

The CSS style is as follows:

div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}

background-color: #CCC; border: #000 1px solid; Add a border and background color to the DIV to facilitate observation of the effect.

​text-align 50px​, the value of 50px is calculated. The specific algorithm of ​padding-top​ is as follows: (height of DIV – height of picture)/2, but it should be noted here that according to the principle of the box model, we You also need to subtract the value of padding-top from the original height of the DIV 200, so that the display is correct, otherwise the DIV will become taller.

Method Two:

Idea: Use only the padding attribute and calculate the centering

The structure code is the same as above;

The CSS style is as follows:

div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}

Note: The calculation of the width and height of DIV here follows the box model principle, and the calculation method is the same as above.

Method three:

Idea: Use the ​margin​ attribute of the image to center the image horizontally, and use the ​padding​ attribute of the DIV to center the image vertically.

The structure code is the same as above;

The CSS code is as follows:

div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}

img {display:block; margin:0 auto;}

Remark:

​Img​ is an inline element. To set its ​margin​ attribute to center it, it must be converted into a block element ​display 0 auto;​to achieve horizontal centering of the picture; (Some designers add a div to the picture tag, and then centering it through the margin of the div tag is also possible, but there are more pairs of divs in the structure, which is relatively troublesome) The method of vertical centering is the same as the previous one, so I won’t repeat it again.

The above methods all have a prerequisite, that is, the size of the DIV and the image must be known, otherwise the vertical centering effect cannot be achieved.

How to center and crop an image with one line of css

Setting the crop size of an image is very easy, you just need to use this line of code in CSS:

img {

object-fit: cover;

}

That’s it. No need for semantics, wrapping divs, or other meaningless code.

This technology is very good at cropping inappropriately sized avatar images into square or circular images. Take the wide picture of a bear below as an example. Once the object-fit:cover technique is applied to such an image, and the width and height are set, the image will crop and center itself.
​object-fit cover​ is exactly the same, but it is used to style imgs, videos, and other media tags instead of setting styles for background images.

Quite a few recent browsers support object-fit technology, and there are polyfill projects that allow you to use this technology in older browsers (IE8+).

Related Posts

Production of HTML website navigation bar

DOM —— Delete node

Ajax Advanced Chapter 02—Cross-domain and JSONP

vue3+vite+typescript implements low-code form editor

I have painstakingly compiled a comprehensive collection of JavaScript knowledge points, with super detailed suggestions for collection! ! !

HTML rotating photo album (0 basics, learn in 1 minute)

“DNS” and “CDN”

Teach you step by step how to make the navigation bar at the bottom of your mobile phone, and your boss will agree after reading it

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*