DIV CSS image centering method for mixed graphics and text_html/css_WEB-ITnose

Many people use various SPAN, DIV, LI, etc. for IMG in order to center the DIV images mixed with text, so that they can use text-align for centering.

1 <div>图文混排2 <br>3 <span style="text-align:center"><img  src="/static/imghwm/default1.png"  data-src="http://www.baidu.com/img/baidu_jgylogo3.gif"  class="lazy" alt="DIV CSS image centering method for mixed graphics and text_html/css_WEB-ITnose" ></span>4 </div>

For the centering of DIV, many people use the following method. However, this method is not suitable for IMG centering by default.

1 div{margin:0 auto}

This is because the IMG tag is an inline element (inline element). Inline elements do not support the Margin attribute. The Display attribute is used to force the IMG to be a block element. Display, the picture can be centered in the mixed arrangement of pictures and texts.

1 IMG {display:block;margin:0 auto;}