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

Editor to share with you how CSS let the picture automatically center in the content of the article, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The first thing to adjust is to let the picture occupy a line of space.

Supplement CSS knowledge points:

Image (

(tag) defaults to inline style (inline style), which generally means that the HTML tag elements before or after it will be arranged immediately before and after it (such as shadow) without a new line, while tags like DIV are block-level elements by default, and tag elements before and after block-level elements will wrap. Therefore, it is necessary to change the picture style in the article content from inline style to block block-level elements, or it is easy to get entangled with the text content.

Keep it simple:

The block element is displayed as a block-level element with a newline character before and after it.

Inline defaults. The element is displayed as an inline element without a newline character before and after the element.

Add: display: block to the original control image style.

.entry img {

Max-width: 100%

Height: auto

Display: block

}

After the image is set as a block-level element, you need to center the image. Centering also uses the code that centers the page layout as a whole, that is, margin:0 auto,0 can be changed to any data, pixels or EM; is important is the AUTO attribute, because it controls the distance between the left and right of the element, and AUTO is the attribute used to center.

Example:

.entry img {

Max-width: 100%

Height: auto

Display: block

Margin:0 auto

}

After the above settings, the image can be automatically centered in the content of the article. However, in practice, it is found that some old web articles have an inline style when they are published, such as:

Like this. Because the priority (cascading) level of inline styles is higher than the definition of automatic centering of images in external stylesheets, the margin:0 auto just defined is invalid.

This is not a problem, use this center! important is designated as the highest priority. The best styles to use are as follows.

.entry img {

Max-width: 100%

Height: auto

Display: block

Margin: 0 auto! important

}

The above is all the content of the article "how CSS makes the picture center automatically in the article content". 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.