Une brève introduction à l'utilisation de l'alignement vertical et de la hauteur de ligne en CSS-tutoriel CSS-php.cn

Une brève introduction à l'utilisation de l'alignement vertical et de la hauteur de ligne en CSS

高洛峰

Libérer： 2017-03-07 11:49:47

original

1377 Les gens l'ont consulté

(1) Mettez une image dans un bloc p et définissez la couleur d'arrière-plan du bloc p sur aigue-marine. Vous constaterez qu'il y a un certain écart entre l'image et le bord inférieur du bloc p.

Exemple :

　　 Une brève introduction à lutilisation de lalignement vertical et de la hauteur de ligne en CSS

Le code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css中vertical-align和line-height的用法</title>
    <style>
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        p{   
            background-color: aquamarine;   
        }   
        img {   
            width: 300px;   
        }   
    </style>
</head>
<body>
    <p>
        <img src="./131796750659172.jpg" alt="picture">
    </p>
</body>
</html>

Copier après la connexion

(2) , dans p Mettez une balise span après l'image de bloc avec le contenu xxxx ! Vous constaterez que les éléments de la balise span et l'image sont alignés avec la ligne du bas. Lorsque vous ajoutez un arrière-plan à la travée, vous pouvez voir que le bas. de l’image est aligné avec le bas de la lettre x de.

Exemple :
　 Une brève introduction à lutilisation de lalignement vertical et de la hauteur de ligne en CSS

Exemple : On le voit clairement après un zoom avant !

　　 Une brève introduction à lutilisation de lalignement vertical et de la hauteur de ligne en CSS

Le code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css中vertical-align和line-height的用法</title>
    <style>
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        p{   
            background-color: aquamarine;   
        }   
        img{   
            width: 300px;   
        }   
        span{   
            background-color: azure;   
        }   
    </style>
</head>
<body>
    <p>
        <img src="./131796750659172.jpg" alt="picture">
        <span>xxxxx!</span>
    </p>
</body>
</html>

Copier après la connexion

Pourquoi cela arrive-t-il ?

A : La raison est que les éléments en ligne sont affectés par l'alignement vertical (alignement vertical) et la hauteur de ligne (hauteur de ligne), et l'alignement par défaut de l'alignement vertical est baseline , c'est-à-dire l'alignement de la ligne de base. Cette ligne de base est le bord inférieur de la lettre X dans la balise span, de sorte que le bas de l'image est aligné avec le bas de la lettre (et non avec l'arrière-plan de la balise span). Et comme les lettres elles-mêmes ont une valeur de hauteur de ligne (line-height), la balise span est plus haute que les lettres après avoir ajouté un arrière-plan.

Solution : (L'une des quatre méthodes peut résoudre ce problème)

(1), changez la police dans l'ensemble de la taille p est défini sur 0 ;

(2), changez l'image img en un élément de niveau bloc, c'est-à-dire définissez-la sur display:block

(3), définissez une hauteur de ligne; pour p (la valeur doit être aussi petite que possible), définissez la hauteur de ligne : 5px

(4), définissez l'alignement vertical de l'image, la valeur peut être n'importe quel haut/milieu/ bottom (afin de remplacer la valeur de base par défaut) ;

L'effet est le suivant :

　 Une brève introduction à lutilisation de lalignement vertical et de la hauteur de ligne en CSS

Le code complet est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css中vertical-align和line-height的用法</title>
    <style>
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        p{   
            background-color: aquamarine;   
            /*line-height: 5px;*/   
            /*font-size: 0;*/   
        }   
        img{   
            width: 300px;   
            /*display: block;*/   
            vertical-align: bottom;   
        }   
        span{   
            background-color: azure;   
        }   
    </style>
</head>
<body>
    <p>
        <img src="./131796750659172.jpg" alt="picture">
        <span>xxxxx!</span>
    </p>
</body>
</html>

Copier après la connexion

2. Le problème du centrage vertical des images

Ajoutez ce qui suit attributs et valeurs d'attributdans p et img pour réaliser que l'image est dans le bloc p centrée verticalement.

<style type="text/css">
...   

p{   
    line-height: 500px;   
    font-size: 0px;   
}   
img{   
    vertical-align: middle;   
}   

...   
<style>

Copier après la connexion

Une brève introduction à lutilisation de lalignement vertical et de la hauteur de ligne en CSS

Le code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css中vertical-align和line-height的用法</title>
    <style>
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        p{   
            background-color: aquamarine;   
            line-height: 500px;   
            font-size: 0px;   
        }   
        img{   
            width: 300px;   
            vertical-align: middle;   
        }   
        span{   
            background-color: azure;   
        }   
    </style>
</head>
<body>
    <p>
        <img src="./131796750659172.jpg" alt="picture">
        <span>xxxxx!</span>
    </p>
</body>
</html>

Copier après la connexion

L'article ci-dessus parle brièvement à propos de vertical en css L'utilisation de -align et line-height est tout le contenu partagé par l'éditeur. J'espère que cela pourra vous donner une référence et j'espère que vous soutiendrez le site Web PHP chinois.

Pour plus d'articles sur l'utilisation de l'alignement vertical et de la hauteur de ligne en CSS, veuillez prêter attention au site Web PHP chinois !

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Une brève introduction à l'utilisation de l'alignement vertical et de la hauteur de ligne en CSS