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

WBOY
Freigeben: 2016-06-24 11:44:10
Original
1826 Leute haben es durchsucht

不少人为了让 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>
Nach dem Login kopieren

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

1 div{margin:0 auto}
Nach dem Login kopieren

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

1 IMG {display:block;margin:0 auto;}
Nach dem Login kopieren

 



Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!