May 04, 2021 CSS
1. Third, css picture center with text-align: center invalid what's going on?
2. Fourth, how to make the picture in the DIV horizontal and vertical two directions are centered?
3. The method of centering and cropping a picture with a row of css
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 searchedCss
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;}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle; }
* {margin:0;padding:0;}
div {
width:500px;border:1px solid #666;
height:500px;
background:url("/statics/images/w3c/intro.png") center no-repeat;}
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:
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.
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.
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).