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

This article mainly introduces how to achieve the horizontal vertical center of DIV pictures in CSS related knowledge, the content is detailed and easy to understand, simple and fast operation, with a certain reference value, I believe that you read this CSS how to achieve DIV pictures horizontal vertical center article will have a harvest, let's take a look at it.

The so-called horizontal and vertical center of the picture is to place the picture in a container element (the container is larger than the picture size or a container with a specified size), and the picture is in the middle of the container (the middle refers to the middle of the element container), while the picture is not shown in the form of a background picture (background-image).

In the form of elements. As shown in the following figure:

1, the solution to the horizontal center: if the picture floats to the left and "display:inline", as long as the picture is set a "text-align:center" attribute, the horizontal center will be solved smoothly.

2. The way to solve the vertical center: use display:table-cell and set the line span of display:inline-block.

Complete example:

Html Code:

Css Code:

. ImgWrap li {

Float: left

Border: solid 1px # 666

Margin: 10px 10px 0 0

List-style: none

Border-collapse: collapse

}

. ImgWrap a {

Background: # ffa url (images/gridBg.gif) repeat center

Width: 219px

Height: 219px

Display: table-cell

Text-align: center

Vertical-align: middle

}

. ImgWrap a:hover {

Background-color: # dfd

}

. ImgWrap img {

Border: solid 1px # 66f

Vertical-align: middle

}

Horizontal and vertical centering is a lot of simple things, right? set the picture to set the scene, and set background-position:center to the background.

If you can only use pictures

What kind of situation:

1. The width and height of the picture is fixed, which is very simple.

Horizontal center: add dispaly:block;margin:0 auto to the css of the picture

Vertical center: calculate (the height of div-the height of the picture) / 2 by yourself, and get the margin-top value.

two。 The height of the picture is unknown, so this layout is difficult to implement. I usually do it with js.

Horizontal center: same as above, add dispaly:block;margin:0 auto to the css of the picture

Vertical center: use js to calculate (the height of div-the height of the picture) / 2, get the margin-top value assigned to it.

I have studied many methods on the Internet, and I think this is the most effective one.

If the picture floats to the left and "display:inline", set a "text-align:center" property to the picture, the horizontal center is solved.

Use display:table-cell and line-in span with display:inline-block set, so that vertical centering is solved.

This is the end of the article on "how to realize the horizontal and vertical center of DIV pictures in CSS". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve the horizontal and vertical center of DIV pictures in CSS". 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.