Heim  >  Artikel  >  Web-Frontend  >  DIV+CSS 图文混排的图片居中办法_html/css_WEB-ITnose

DIV+CSS 图文混排的图片居中办法_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:44:101873Durchsuche

不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN、DIV、LI 等等,以便于使用 text-align来进行居中。

1 <div>图文混排2 <br>3 <span style="text-align:center"><img  src="http://www.baidu.com/img/baidu_jgylogo3.gif" alt="DIV+CSS 图文混排的图片居中办法_html/css_WEB-ITnose" ></span>4 </div>

而对于 DIV 的居中,使用下面的这种办法的非常多,然而这种办法默认状态下并不适用于 IMG 居中。

1 div{margin:0 auto}

这是因为 IMG 标签是属于内联元素(行内元素),内联元素是不支持 Margin 属性,通过 Display 属性将 IMG 强制为块元素的方式显示,便可在图文混排中使得图片可以居中。

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

 



Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn