Introduction de l'article de wulin.com (www.vevb.com): Comment centrer les images verticalement.
La largeur et la hauteur de l'image sont inconnues et il n'y a pas de taille fixe. Dans cette prémisse, il est assez gênant de rendre l'image centrée verticalement dans un conteneur avec une largeur et une hauteur fixes. Étant donné que les projets récents peuvent utiliser cette solution, j'ai collecté et réglé certaines méthodes couramment utilisées.
Le chiffre suivant est un rendu idéal. La largeur et la hauteur du conteneur externe sont fixes, et la largeur et la hauteur de l'image au milieu sont inconnues, mais l'image doit toujours être centrée verticalement par rapport au conteneur externe.
Cependant, l'effet mis en œuvre en réalité n'est pas parfait. Étant donné que l'analyse de chaque navigateur est différente, chaque navigateur aura un écart de 1px-3px.
MÉTHODE 1 (Transitionnel XHTML 1.0):
Cette méthode consiste à définir le mode d'affichage du conteneur externe à afficher: Tableau, nid une balise de portée à l'extérieur de la balise IMG et définir le mode d'affichage de la portée pour afficher: cellule de table, afin que l'aligne verticale puisse être facilement alignée comme des éléments de table. Bien sûr, ce n'est que dans les navigateurs standard, IE6 / IE7 doit également utiliser le positionnement.
Partie de structure HTML:
<div id = box>
<span> <img src = images / demo.jpg alt => </span>
</div>
Partie de style CSS:
<style type = text / css>
#boîte{
Largeur: 500px; hauteur: 400px;
Affichage: table;
Texte-aligne: Centre;
Border: 1px solide # d3d3d3; arrière-plan: #fff;
}
#box span {
Affichage: cellule de table;
Adigne vertical: milieu;
}
#box img {
Border: 1px solide #ccc;
}
</ style>
<! - [Si LTE IE 7]>
<style type = text / css>
#boîte{
Position: relative;
débordement: caché;
}
#box span {
Position: absolue;
Gauche: 50%; haut: 50%;
}
#box img {
Position: relative;
Gauche: -50%; haut: -50%;
}
</ style>
<! [endif] ->
Méthode 2 (Transitionnel XHTML 1.0):
Les principes et les structures de la mise en œuvre de la méthode 2 et de la méthode 1 sont similaires, et les structures sont les mêmes. La méthode 1 utilise des annotations conditionnelles et la méthode 2 utilise le piratage CSS.
Partie de style CSS:
<style type = text / css>
#boîte{
Largeur: 500px; hauteur: 400px;
débordement: caché;
Position: relative;
Affichage: cellule de table;
Texte-aligne: Centre;
Adigne vertical: milieu;
Border: 1px solide # d3d3d3; arrière-plan: #fff;
}
#box span {
Position: statique;
* Position: absolue; / * Pirater pour IE6 / 7 * /
en haut: 50%; / * Pirater pour IE6 / 7 * /
}
#box img {
Position: statique;
* Position: relative; / * Pirater pour IE6 / 7 * /
Top: -50%; Gauche: -50%; / * Pirater pour IE6 / 7 * /
Border: 1px solide #ccc;
}
</ style>
Cette méthode a un inconvénient. Dans un navigateur standard, puisque le mode d'affichage du conteneur externe #box est affiché: cellule de table, l'attribut de marge ne peut pas être utilisé pour #box, et la définition des bordures dans IE8 n'est pas non plus invalide.
Méthode 3 (xhtml 1.0 strict):
Les navigateurs standard définissent toujours le mode d'affichage du conteneur externe #box pour afficher: cellule de table. IE6 / IE7 utilise la méthode d'insertion d'une paire de balises vides devant la balise IMG.
Partie de structure HTML:
<div id = box> <i> </i> <img src = images / démo.jpg alt => </div>
Partie de style CSS:
<style type = text / css>
#boîte{
Largeur: 500px; hauteur: 400px;
Affichage: cellule de table;
Texte-aligne: Centre;
Adigne vertical: milieu;
Border: 1px solide # d3d3d3; arrière-plan: #fff;
}
#box img {
Border: 1px solide #ccc;
}
</ style>
<! - [Si c'est-à-dire]>>
<style type = text / css>
#box i {
Affichage: bloc en ligne;
hauteur: 100%;
Adigne vertical: milieu
}
#box img {
Adigne vertical: milieu
}
</ style>
<! [endif] ->
La méthode 3 s'applique également à la transition XHTML 1.0. Les méthodes ci-dessus sont collectées sur le site Web d'enseignement Web. Pour le moment, seules ces trois méthodes sont assez satisfaites et la compatibilité est bonne et les limitations sont relativement faibles. J'ai également testé certaines méthodes une par une, mais les résultats ne sont pas idéaux, et il existe des différences très différentes entre les différents navigateurs. De plus, Situ Zhengmei a également collecté certaines méthodes ici.
Pensée: De nombreuses méthodes s'appuient sur la définition du mode d'affichage du conteneur externe à une table pour atteindre un centrage vertical, c'est-à-dire le div pour simuler le tableau. À quel point serait-il bon que CSS ait une propriété pour réaliser cet effet. Si vous avez une bonne méthode, vous êtes invités à le partager.
original: