Posts in current category

Great for my brother, there are so many ways for css pictures to center


May 04, 2021 01:00 CSS


Table of contents


There are many ways to center a picture showing css, but in many cases some methods don't work, which is a headache, for example

Picture properties are generally set

text-align:centre

Levels are centered, but this method often doesn't work.

Many front-end engineers have studied or searched

Css

The centering method of the picture.

But in fact There are many different situations in which CSS pictures are centered, and there are many different workarounds, as follows:

The picture center is divided into horizontal center and vertical center

Tip: Before you start reading the following, you can learn the basics of CSS pictures.


First, the level of the center:


1, separate text vertical centering we only need to set CSS style line-height properties.


2, text and pictures in the same row, in setting div height at the same time on this CSS style of the picture "img" style vertical-align:middle vertical centering properties, such as: img{vertical-align:middle;} ​ 。


3 The method of setting the horizontal centering of block-level elements that are not sure of width


(1) is implemented table as a container. O f course, this approach is not recommended because meaningless labels are added. L et's talk a little bit about it here. Table label itself is not a block-level element, and if table set the width of the table, the width inside him is supported by the width of his inner element. B ut even if we table set the width of table margin of the table margin:0 auto; You can achieve the level of centering! This way we can table by setting the table level, indirectly.

(2) The advantage over table is that you don't have to add semantic labels to simplify the depth of label nesting. T he idea is to center by changing the display property value of the text-align:center inline T here is also something wrong with this approach, which is that when a block-level element is changed to an in-row element, the in-line element has less functionality than the block element. For example, set the length and width value, etc. , in the application of the project may have some limitations, we can choose.

(3) by setting a float float for the float and then setting the position relative and left:50%; Child element position:relative left:-50% horizontal centering. T he benefit is that you can keep block-level elements display:block without adding meaningless labels and without adding nested depth. T he point is that position:relative; Has brought some side effects. Here's the example code for the third method, body it in the body label.


Second, vertical center:


For this CSS-centered problem, we can use the method of setting up background pictures. Examples:


body s BACKGROUND: url ("picture file") #FFF no-repeat center; }


The key is this center which means that the background picture is centered in the container. You can also center to top left or write a number directly to adjust its position.


Method one:

div {

width:500px;

height:500px;

border:1px solid #666;

overflow:hidden;

position:relative;

display:table-cell;

text-align:center;

vertical-align:middle;}


Try it out . . .

Method two:

div p {

position:static;

+position:absolute;

top:50%

}

img {

position:static;

+position:relative;

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

vertical-align:middle

}


Try it out . . .

Method three:

img {

position:static;

+position:relative;

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

vertical-align:middle; }


Try it out . . .

Method four:

* {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 out . . .


Third, css picture center with text-align: center invalid what's going on?

div{

border:1px solid red;

margin:20px;

text-align:center;

}


Try it out . . .


Fourth, how to make the picture in the DIV horizontal and vertical two directions are centered?

Method one:

Idea: Center the picture horizontally with the text-align property, and padding-top to center it vertically.


The structure is as follows:

<div>

<img src="images/tt.gif" width="150" height="100" />

</div>


The CSS style is as follows:

div {width:300px; h eight:150px; b ackground-color:#CCC; b order:#000 1px solid; t ext-align:center; p adding-top:50px; }


The results are as follows:


Great for my brother, there are so many ways for css pictures to center


Interpretation:

The size of the picture is 150x100px and the size of DIV is 300x200px;


background-color:#CCC; b order:#000 1px solid; Add a border and background color to the DIV for easy observation.


text-align:center achieve the horizontal center of the picture; padding-top:50px 50px this value is calculated, padding-top algorithm is as follows: (DIV height - the height of the picture)/2, but here's to note that according to the box model principle, we also have to subtract the original height of the DIV 200 padding-top so that the display is correct, otherwise diviv will be higher.


Method two:
Idea: Use only padding property to get centered by calculation

The structure code is the same as above;

The CSS style is as follows:

div {width:225px; h eight:150px; b ackground-color:#eee; b order:#000 1px solid; p adding-top:50px; p adding-left:75px; }

Note: Here the width and height calculation of DIV follows the box model principle, the calculation method is the same.


Method three:
Idea: Center the picture margin the picture's margin property, and center the padding the DIV's padding property.

The structure code is the same as above;

The CSS code is as follows:

div {width:300px; h eight:150px; b ackground-color:#eee; p adding-top:50px; b order:#000 1px solid; }

img {display:block; m argin:0 a uto; }

Note:

Img an inline element, and to center margin property, convert it to a block display:block; Then take advantage margin:0 auto; Realize the horizontal centering of the picture; (some designers add a div label to the picture, and then achieve centering through the div margin or, however, there are more pairs of divs in the structure, relative trouble points) as far as vertical centering is the same as before, it is no longer repeated.

The above method is premised, that is, you must know the size of div and picture, otherwise you can not complete the vertical centering effect.


The method of centering and cropping a picture with a row of css

Setting the crop size of a picture is so simple that you only need to use this line of code in CSS:

img {

object-fit: cover;

}

That's it. N o semantics, wrapping div, or other meaningless code are required.

This technique is a good way to crop an image of an avatar that is not the right size into a square or circular image. T ake the wide picture of the bear below. O nce the object-fit:cover is applied to this image and set wide and high, the picture itself is cropped and centered.


Great for my brother, there are so many ways for css pictures to center

object-fit:cover cropped exactly background-size:cover but it is used to style imgs, videos, and other media labels, not background pictures.
Quite a few of the latest browsers support object-fit technology, and there are polyfill projects that let you use it in older browsers (IE8 plus).