Comment centrer verticalement une image de hauteur inconnue

Cet article présente principalement la méthode détaillée de réglage du centrage vertical pour les images de hauteur inconnue. Lors de la pratique, portez une attention particulière à la situation d'affichage dans le navigateur IE. Les amis dans le besoin peuvent se référer au

Navigateur standard ou Set. le mode d'affichage du conteneur externe #box to display:table-cell IE6/IE7 utilise la méthode d'insertion d'une paire de balises vides devant la balise img

mais en fait dans. le navigateur L'effet obtenu n'est pas parfait. Étant donné que l'analyse de chaque navigateur est différente, il y aura un écart de 1px-3px dans chaque navigateur.
Méthode 1 :

Cette méthode consiste à définir le mode d'affichage du conteneur externe sur display:table, à imbriquer une balise span à l'extérieur de la balise img et à définir le mode d'affichage span pour display:table-cell, vous pouvez donc facilement utiliser vertical-align pour aligner comme des éléments de tableau. Bien sûr, cela ne concerne que les navigateurs standard, IE6/IE7 doivent également utiliser le positionnement.
Code HTML

<p id="box">
<span><img src="images/demo.jpg" alt="" /></span>
</p>

Code CSS

<style type="text/css">   
#box{   
    width:500px;height:400px;   
    display:table;   
    text-align:center;   
    border:1px solid #d3d3d3;background:#fff;   
}   
#box span{   
    display:table-cell;   
    vertical-align:middle;   
}   
#box img{   
    border:1px solid #ccc;   
}   
</style>   
<!--[if lte IE 7]>   
<style type="text/css">   
#box{   
    position:relative;   
    overflow:hidden;   
}   
#box span{   
    position:absolute;   
    left:50%;top:50%;   
}   
#box img{   
    position:relative;   
    left:-50%;top:-50%;   
}   
</style>   
<![endif]-->

Méthode deux :

Méthode deux et méthode Le principe de mise en œuvre de la première méthode est similaire et la structure est la même. La première méthode utilise des commentaires conditionnels et la deuxième méthode utilise CSS Hack.
Code CSS

#box{   
    width:500px;height:400px;   
    overflow:hidden;   
    position:relative;   
    display:table-cell;   
    text-align:center;   
    vertical-align:middle;   
    border:1px solid #d3d3d3;background:#fff;   
}   
#box span{   
    position:static;   
    *position:absolute; /*针对IE6/7的Hack*/
    top:50%; /*针对IE6/7的Hack*/
}   
#box img {   
    position:static;   
    *position:relative; /*针对IE6/7的Hack*/
    top:-50%;left:-50%; /*针对IE6/7的Hack*/
    border:1px solid #ccc;   
}

Cette méthode présente un inconvénient. Sous les navigateurs standards, puisque le mode d'affichage du conteneur externe #box est display:table-cell, #box ne peut pas utiliser l'attribut margin, et La définition de la bordure sous IE8 n'a également aucun effet.
Méthode 3 :

Les navigateurs standards définissent toujours le mode d'affichage du conteneur externe #box sur display:table-cell, et IE6/IE7 utilise la balise img. La méthode consiste à insérer une paire de balises vides devant.

Code HTML

<p id="box">
    <i></i><img src="images/demo.jpg" alt="" />
</p>

Code CSS

<style type="text/css">   
#box{   
width:500px;height:400px;   
display:table-cell;   
text-align:center;   
vertical-align:middle;   
border:1px solid #d3d3d3;background:#fff;   
}   
#box img{   
border:1px solid #ccc;   
}   
</style>   
<!--[if IE]>   
<style type="text/css">   
#box i {   
    display:inline-block;   
    height:100%;   
    vertical-align:middle
    }   
#box img {   
    vertical-align:middle
    }   
</style>   
<![endif]-->

Méthode 4 :

en dehors de la balise img Enveloppez une balise p. Les navigateurs standard utilisent l'attribut pseudo-class : avant la balise p pour y parvenir, IE6/IE7 utilise des expressions CSS pour assurer la compatibilité.
Code HTML

<p id="box">
    <p><img src="images/demo.jpg" alt="" /></p>
</p>

Code CSS

#box{   
    width:500px;height:400px;   
    text-align:center;   
    border:1px solid #d3d3d3;background:#fff;   
}   
#box p{   
    width:500px;height:400px;   
    line-height:400px; /* 行高等于高度 */
}   
/* 兼容标准浏览器 */
#box p:before{   
    content:"."; /* <a href="http://casinogreece.gr/">????????????</a> 具体的值与垂直居中无关，尽可能的节省字符 */
    margin-left:-5px; font-size:10px; /* 修复居中的小BUG */
    visibility:hidden; /*设置成隐藏元素*/
}   
#box p img{   
    *margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
    vertical-align:middle;   
    border:1px solid #ccc;   
}

Utilisation : beforr Cette méthode est plus puissante pour les navigateurs standards et n'a aucun effet secondaire, mais pour IE6/IE7 , si vous avez des exigences de performances élevées, la méthode d'expression CSS doit être utilisée avec prudence.
Méthode 5 :

Cette méthode est pour IE6/IE7 : définissez la taille de la police du conteneur extérieur de l'image sur 0,873 fois la hauteur pour obtenir le centrage standard. Les navigateurs utilisent toujours la méthode ci-dessus pour obtenir la compatibilité et la structure est plus élégante.
Code HTML

<p id="box">
    <img src="images/demo.jpg" alt="" />
</p>

Code CSS

#box{   
    width:500px;height:400px;   
    text-align:center;   
    border:1px solid #d3d3d3;background:#fff;   
    /* 兼容标准浏览器 */
    display: table-cell;   
 vertical-align:middle;   
    /* 兼容IE6/IE7 */
    *display:block;   
    *font-size:349px; /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */
    *font-family:Arial; /* 防止非utf-8引起的hack失效问题，如gbk编码 */
}   
#box img{   
    vertical-align:middle;   
}

La méthode de définition de la taille de la police semble bizarre, et je n'ai pas vu d'explication raisonnable seulement. Connaître les éléments d'image. Certaines caractéristiques sont différentes des autres éléments, mais pour IE6/IE7, cette méthode est assez puissante.
Réflexion : de nombreuses méthodes reposent sur la définition du mode d'affichage du conteneur externe sur tableau pour obtenir un centrage vertical, c'est-à-dire p pour simuler un tableau. Ce serait formidable si CSS avait un attribut pour obtenir cet effet.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser des valeurs de marge négatives en CSS pour ajuster la position centrale

Comment utilisez l'attribut position:fixed Centrez le DIV

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!