Maison > interface Web > tutoriel HTML > 大小不确定图片垂直居中_html/css_WEB-ITnose

大小不确定图片垂直居中_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:51:24
original
1408 Les gens l'ont consulté

如果图片大小不确定,怎样使图片在DIV中垂直水平居中呢?当然,如果用表格的话,另当别论了。这里只讨论使用css来控制的情况。

     如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0 auto;)这个属性就可以了。但是,垂直方向的居中好像很难做到,无论是用css里的"vertical-align:middle;",还是用img的align="absmiddle",图片在垂直方向似乎都无动于衷。

     发现了如下一个方法,做个收藏。

 

样式部分:


.middle-out{

       width: 600px; 

       height: 385px; 

       position: relative; 

       display: table-cell;

       vertical-align: middle;

       text-align:center;

       border: 1px solid #f00;

 }

.middle-in{

       position: static;

       *position:absolute;

       top:50%;

 }

.middle-out .middle-in  img{

       position:static;

       *position:relative;

       top:-50%;

       left:-50%;

 }

HTML部分:

  

          大小不确定图片垂直居中_html/css_WEB-ITnose

     

É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