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

Today, I would like to share with you what are the relevant knowledge points about the horizontal and vertical center of CSS html pictures, which are detailed in content and clear in logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

1. Text-align:center achieves the horizontal center of the picture.

Text-align is generally used to center text horizontally, but it can also be used for pictures. The code is as follows:

CSS section:

Div {

Text-align:center

Width:500px

Border:greensolid1px

}

HTML section:

Effect picture:

Picture vertically centered 1.jpg

2. Line-height and text-align:center realize the horizontal and vertical center of the picture.

Setting the value of line-height to be equal to height can achieve vertical centering and text-align:center can achieve horizontal centering. Like the HTML part, the CSS code is as follows:

Div {

Text-align:center

Width:400px

Height:200px

Line-height:200px

Border:greensolid1px

}

Img {

Vertical-align:middle

}

Effect picture:

Picture vertically centered 3.jpg

3. Display:table and display:table-cell realize the horizontal and vertical center of the picture.

Use the table method to set display:table,display:table-cell, but this method is not compatible with IE6/IE7, if you do not need to support IE67, you can use this method

The css style is written directly in the tag. The code is as follows:

4. Position realizes the horizontal and vertical center of the picture.

Positioning method: set relative positioning in the parent box and absolute positioning in the child box, that is, the so-called father-to-son absolute. Set the image position to 50% on the left and 50% on the top (note: this is not centered vertically). You also need to set margin-left to half the length of the image and margin-top to half the height of the image. Like the HTML part, the CSS code is as follows

Div {

Width:400px

Height:200px

Position:relative

Border:greensolid1px

}

Img {

Width:200px

Height:50px

Position:absolute

Left:50%

Top:50%

Margin-left:-100px

Margin-top:-25px

}

5. Background background to center the picture horizontally and vertically.

Using background:urlno-repeatcentercenter to realize the horizontal and vertical center of the picture

Div {

Width:400px

Height:200px

Border:greensolid1px

Background:url (img/logo.png) no-repeatcentercenter

}

These are all the contents of this article entitled "what are the ways to center CSS html pictures horizontally and vertically?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.