Comment centrer verticalement des images de texte en HTML

Cette fois, je vais vous apporter du texte HTML des imagesComment centrer verticalement des images de texte HTML, quelles sont les précautions, et voici la pratique réelle Jetons un coup d'œil au cas.

Méthode 1 : définissez la hauteur de la boîte pour qu'elle soit la même que la hauteur de la ligne. Cette méthode convient à une ligne de texte.

Utiliser des attributs pour le centrage vertical des images et l'alignement d'une ligne de texte vertical-align

Les petites icônes et le texte sont alignés verticalement et les petites icônes sont insérées comme arrière-plan

// attr : définissez vos propres attributs générés, tels que sélectionné coché, même si vous cliquez dessus avec la souris, sa valeur n'est pas définie, il est donc recommandé d'utiliser prop

Bloc contenant
pour vos propres attributs Le calcul de la taille et de la position d'un élément est souvent déterminé par le bloc contenant dans lequel se trouve l'élément. Le bloc contenant ne fait pas spécifiquement référence à une zone d'élément, mais à une zone visuellement imaginaire. Si vous le comprenez, vous pouvez facilement l'attribuer à l'élément To.
Alors comment savoir où se trouve le bloc contenant d'un élément ?

Bloc contenant initial
L'agent utilisateur (tel qu'un navigateur) sélectionne l'élément racine comme bloc contenant (appelé bloc contenant initial). Lorsqu'un élément enfant du HTML n'a pas d'autre bloc conteneur proche, il s'appuiera sur le bloc conteneur initial pour le positionnement
Quelle est la taille du bloc conteneur initial ? Autrement dit, la taille de la fenêtre d'affichage et la hauteur n'augmenteront pas avec l'augmentation du HTML. Pour les éléments

non absolument positionnés , le bloc conteneur est constitué des limites de contenu de la boîte d'élément ancêtre au niveau du bloc la plus proche.
Il en va de même pour les éléments flottants, en commençant par la limite du contenu.

Le bloc conteneur de l'élément absolu est établi par l'ancêtre le plus proche dont la position n'est pas statique
En fait, c'est plus compliqué. Vous devez déterminer si le bloc conteneur de l'élément absolu est créé en ligne. ou en tant qu'élément de niveau bloc. La compatibilité en ligne est relativement mauvaise, il est donc généralement évité d'inclure des éléments de niveau bloc dans éléments en ligne , de sorte que la plupart des blocs conteneurs sont créés à partir d'éléments de niveau bloc.
Son bloc contenant est formé par la limite intérieure de la frontière de l'ancêtre.

Si l'élément a l'attribut 'position:fixed', le bloc contenant est créé par la fenêtre.

Le centrage de l'image CSS est divisé en deux situations : le centrage horizontal de l'image CSS et le centrage vertical. l'image doit être horizontale en même temps. Centrage vertical,

Voici plusieurs situations de centrage :

Centrage horizontal des images CSS

1. auto pour obtenir un centrage horizontal des images

Utiliser margin: 0 auto pour centrer l'image consiste à ajouter une marge de style CSS : 0 auto à l'image comme suit :

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="margin: 0 auto;" /></div>

2. Utilisez le attribut de centrage horizontal du texte text-align : center

Le code est le suivant :

<div style="text-align: center; width: 500px; border: green solid 1px;"><img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" /></div>

centrage vertical de l'image CSS

1. Utilisez height==row height pour. réaliser le centrage vertical de l'image

Cette méthode nécessite de préciser la hauteur Elle peut être utilisée, le code est le suivant :

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">   
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block; vertical-align: middle;" /></div>

Utiliser le tableau pour réaliser le centrage vertical de. images

La méthode d'utilisation de table consiste à utiliser l'attribut de centrage vertical de table, le code est le suivant :

Ici, nous utilisons display: table et display: table-cell; Cette méthode n'est pas compatible avec IE6/IE7. IE67 ne prend pas en charge display: table. Si vous n'avez pas besoin de prendre en charge IE67, vous pouvez l'utiliser

Inconvénients : Lorsque vous définissez display: table; changez votre mise en page d'origine

<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">   <span style="display: table-cell; vertical-align: middle; ">
       <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" />
   </span></div>

3. Utilisez le positionnement absolu pour centrer verticalement l'image

Si la largeur et la largeur de l'image sont connues La hauteur peut être comme ça, le code est comme suit :

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
    <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" /></div>

4. Le côté mobile peut utiliser la mise en page flexible pour centrer verticalement l'image CSS

Le côté mobile a généralement une version supérieure du navigateur, vous pouvez donc l'utiliser avec audace. Mise en page flexible (la mise en page flexible fait référence à l'utilisation de la mise en page flexible de CSS3) Le code de démonstration est le suivant :

code CSS :

<style type="text/css">
        .ui-flex {
            display: -webkit-box !important;
            display: -webkit-flex !important;
            display: -ms-flexbox !important;
            display: flex !important;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap
        }
        .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
            box-sizing: border-box
        }
        .ui-flex.justify-center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center
        }
        .ui-flex.center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center
        }
    </style>

code HTML :

<div class="ui-flex justify-center center" style="border: green solid 1px; width: 500px; height: 200px;">
    <div class="cell">
    <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="" />
    </div></div>

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Trois types d'introduction de la syntaxe de base CSS

Attributs du modèle de boîte de la mise en page CSS

Solution à l'écart entre les balises d'image et de vue

À propos du formatage au niveau du bloc en CSS

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!