Heim > Artikel > Web-Frontend > Eine kurze Einführung in die Verwendung von Vertical-Align und Line-Height in CSS

Eine kurze Einführung in die Verwendung von Vertical-Align und Line-Height in CSS

高洛峰Original: 2017-03-07 11:49:471380Durchsuche

(1) Fügen Sie ein Bild in einen P-Block ein und stellen Sie die Hintergrundfarbe des P-Blocks auf Aquamarin ein. Sie werden feststellen, dass zwischen dem Bild und dem unteren Rand des p-Blocks eine gewisse Lücke besteht.

Beispiel:

Der Code lautet wie folgt:

<!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>

(2) , in p Fügen Sie nach dem Blockbild ein Span-Tag mit dem Inhalt xxxx ein. Sie werden feststellen, dass die Elemente im Span-Tag und im Bild an der unteren Zeile ausgerichtet sind des Bildes ist am unteren Rand des Buchstabens x von ausgerichtet.

Beispiel:
　 Eine kurze Einführung in die Verwendung von Vertical-Align und Line-Height in CSS

Beispiel: Nach dem Vergrößern ist es deutlich zu erkennen!

　　 Eine kurze Einführung in die Verwendung von Vertical-Align und Line-Height in CSS

Der Code lautet wie folgt:

<!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>

Warum passiert das?

Antwort: Der Grund dafür ist, dass Inline-Elemente standardmäßig von Vertical-Align (vertikale Ausrichtung) und Line-Height (Zeilenhöhe) betroffen sind und die Standardausrichtung von Vertical-Align ist Grundlinie, also Grundlinienausrichtung. Diese Grundlinie ist die Unterkante des Buchstabens X im Span-Tag, sodass der untere Rand des Bildes am unteren Rand des Buchstabens ausgerichtet ist (nicht am Hintergrund des Span-Tags). Und da die Buchstaben selbst einen Zeilenhöhenwert (Zeilenhöhe) haben, ist das Span-Tag nach dem Hinzufügen eines Hintergrunds höher als die Buchstaben.

Lösung: (Jede der vier Methoden kann dieses Problem lösen)

(1), ändern Sie die Schriftart in der gesamten p-Größe auf 0 gesetzt ist;

(2), das Bild img in ein Element auf Blockebene umwandeln, d. h. auf display:block

(3) setzen, eine Zeilenhöhe festlegen für p (Der Wert sollte so klein wie möglich sein), setzen Sie auf line-height:

(4), stellen Sie die vertikale Ausrichtung des Bildes ein, der Wert kann beliebig oben/mitte/ sein; unten (um die Standardwertbasislinie zu überschreiben);

Der Effekt ist wie folgt:

　 Eine kurze Einführung in die Verwendung von Vertical-Align und Line-Height in CSS

Der vollständige Code lautet wie folgt:

<!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>

2. Das Problem der vertikalen Zentrierung von Bildern

Fügen Sie Folgendes hinzu Attribute und Attributwerte in p und img, um das Bild im p-Block vertikal zentriert zu erreichen.

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

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

...   
<style>

Eine kurze Einführung in die Verwendung von Vertical-Align und Line-Height in CSS

Der Code lautet wie folgt:

<!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>

Der obige Artikel geht kurz darauf ein Über Vertical in CSS Die Verwendung von -align und line-height ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie die chinesische PHP-Website unterstützen.

Weitere Einführungen in die Verwendung von Vertical-Align und Line-Height in CSS finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der umfassenden Analyse der BoxgrößeNächster Artikel：Ausführliche Erläuterung der umfassenden Analyse der Boxgröße

In Verbindung stehende Artikel

Mehr sehen