Css achieves the effect of placing images in div

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 ;}

Note:

Img is an inline element. To set its margin attribute to center it, you need to convert it into a block element display: block, and then use margin: 0 auto; to realize horizontal center of the image; (Some designers add a div label to the image and use the margin of the div label to center the image.

Idea: use the text-align attribute to center the image horizontally and set the value of padding-top to center it vertically.

The structure is as follows:

The code is as follows:	Copy code
<Style type = "text/css"> Div { Width: 180px; Height: 180px; Border: 1px solid #000; Position: relative; Display: table-cell; Text-align: center; Vertical-align: middle; } Div p { Position: static; + Position: absolute; Top: 50%; } Div img { Position: static; + Position: relative; Top:-50%; Left:-50%; } </Style> <Div> <p> </p> </div> <br> <Div> <p> </p> </div>

Method 2

The code is as follows:	Copy code
<Div> </Div>

The css style is as follows:

The code is as follows:	Copy code
Div {width: 300px; height: 150px; background-color: # ccc; border: #000 1px solid; text-align: center; padding-top: 50px ;}