Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to center the picture in the html", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to align the picture in the html" this article.

There are many ways to center the picture, which can be regarded as the basis of html. Here are a few ways to introduce you.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

Div {

Width: 200px

Height: 200px

Border: 3px solid skyblue

}

The effect of the above code:

Method 1:

one

two

three

four

five

six

Img {

Position: relative

Left: 50%

Top: 50%

Margin:-60px 0 0-75px

}

Set position positioning for the img tag. Position:relative,left:50%;top:50% refers to the distance by which the element is moved half the width of the parent container to the right and the height of the parent container downwards. Since the distance is half the width distance based on the standard of the parent container, the effect is as follows:

Because this picture is large, it is beyond the scope of div.

After that, you have to move the img back in order to center the img element, margin:-60px 00-75px; it refers to moving the img element to the left, 75px, and 60px up (because the width and height of the picture material used is 150 to 120), so that the picture can be centered.

Method 2:

one

two

three

four

five

six

Img {

Position: relative

Left: 50%

Top: 50%

Transform: translate (- 50% Murray 50%)

}

In fact, here is similar to the above method, but I think this is more practical, because the trouble with the method is that the value of img must change with the size of the img element. It doesn't matter if the margin element is the same size, but this requirement is a bit high.

This method uses 2d conversion, transform:translate (the value of x-axis movement, the value of y-axis movement), the advantage of this method is that you do not have to measure the width and height of the img element, set the percentage directly, in transform:translate (), the percentage used is actually relative to the width and height of the element itself.

Method 3:

Set to a two-level parent container, and the first level sets display:table to convert the first-level parent container to a table type

Then, at the second level, that is, the parent container of img, the parent container sets display:table-cell

Set text-align:center in the first-level parent container

By setting vertical-align: middle at the second level, you can center the picture.

Method 4:

Set the alignment of main and side axes

one

two

three

one

two

three

four

five

six

seven

eight

nine

ten

eleven

Div.a {

Width: 600px

Height: 200px

Border: 1px solid saddlebrown

Display: flex

Justify-content: space-around

Align-items: center

}

Div.an img {

Border: 1px solid red

}

Set display:flex for the parent container and convert the parent container to a telescopic box, because this is required to apply the principal axis alignment.

After that, set the spindle alignment to justify-content: space-around

Note: the justify-content attribute is not supported in Internet Explorer 10 and earlier browsers.

Note: Safari 6.1 and later support this property through the-webkit-justify-content attribute.

Then set the side axis alignment of the parent container, align-items: center

Note: the align-items attribute is not supported in Internet Explorer 10 and earlier browsers.

Note: Safari 7.0 and later support this property through the-webkit-align-items attribute.

What are you looking at? the picture is already in the middle.

If it were not for the lack of support in Internet Explorer 10 and earlier browsers, this method would be the most appropriate.

The above is all the contents of the article "how to align pictures in html". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.