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

This article introduces the relevant knowledge of "how to centralize the display of pictures in html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

First, let's take a look at how css pictures are centered horizontally.

1. Use margin:0 auto to achieve the horizontal center of the picture.

Html image horizontal center code:

2. Using the horizontal center attribute text-align:center of the text to realize the horizontal center of the picture.

Html image horizontal center code:

2. Let's take a look at the implementation of vertical centering of css images.

1. Use line-height to realize the vertical center of the picture.

The vertical center code of html image is as follows:

Note: this method needs to indicate the height before it can be used.

2. Use table to realize the vertical center of the picture.

The vertical center code of html image is as follows:

Note: this method takes advantage of the vertical center attribute of table

Note: here display:table; and display:table-cell; are used to simulate table. This method is not compatible with IE6/IE7,IE67 and does not support display:table. If you do not need to support IE67, you can use it.

This approach has a drawback: when you set up display:table;, it may change your original layout.

3. Use position to realize the vertical center of the picture.

The vertical center code of html image is as follows:

Description: you can use this method if you know the width and height of the picture.

This is the end of the content of "how to centrally display pictures in html5". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.