Maison > interface Web > tutoriel HTML > DIV+CSS 图文混排的图片居中办法_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:44:10
original
1930 Les gens l'ont consulté

不少人为了让 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>
Copier après la connexion

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

1 div{margin:0 auto}
Copier après la connexion

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

1 IMG {display:block;margin:0 auto;}
Copier après la connexion

 



Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal