So zentrieren Sie Textbilder in HTML vertikal

Dieses Mal bringe ich Ihnen HTML-Text BilderWie man HTML-Textbilder vertikal zentriert, welche Vorsichtsmaßnahmen es gibt, und das Folgende ist die tatsächliche Praxis Werfen wir einen Blick auf den Fall.

Methode 1: Stellen Sie die Boxhöhe auf die gleiche wie die Zeilenhöhe ein. Diese Methode eignet sich für eine Textzeile.

Verwenden Sie Attribute zur vertikalen Zentrierung von Bildern und zur Ausrichtung einer Textzeile vertikal ausrichten

Kleine Symbole und Text werden vertikal ausgerichtet und kleine Symbole werden als Hintergrund eingefügt

// attr: Legen Sie Ihre eigenen generierten Attribute fest, z. B. ausgewählt und aktiviert. Auch wenn Sie mit der Maus darauf klicken, ist der Wert undefiniert. Daher wird empfohlen, prop

Umschließender Block

für Ihre eigenen Attribute Die Berechnung der Größe und Position eines Elements wird oft durch den umschließenden Block bestimmt, in dem sich das Element befindet. Der umschließende Block bezieht sich nicht speziell auf einen Elementbereich, sondern auf einen visuell imaginären Wenn Sie es verstanden haben, können Sie es bequem dem Element zuordnen.
Woher wissen Sie dann, wo sich der enthaltende Block eines Elements befindet?

Anfänglicher umschließender Block

Der Benutzeragent (z. B. ein Browser) wählt das Stammelement als umschließenden Block (als anfänglicher umschließender Block bezeichnet) aus. Wenn ein untergeordnetes HTML-Element keinen anderen abschließenden Block hat, wird es für die Positionierung auf den anfänglichen enthaltenden Block angewiesen.
Wie groß ist der anfängliche enthaltende Block? Das heißt, die Größe und Höhe des Ansichtsfensters nimmt mit zunehmendem HTML nicht zu. Für

nicht

absolut positionierte -Elemente besteht der enthaltende Block aus den Inhaltsgrenzen des nächstgelegenen Vorgängerelementfelds auf Blockebene. Das Gleiche gilt für schwebende Elemente, beginnend mit der Inhaltsgrenze.

Der umschließende Block des absoluten Elements wird durch den nächsten Vorfahren erstellt, dessen Position nicht statisch ist.

Tatsächlich ist dies komplizierter. Sie müssen berücksichtigen, ob der umschließende Block des absoluten Elements inline erstellt wird oder als Element auf Blockebene. Die Inline-Kompatibilität ist relativ schlecht, daher wird es im Allgemeinen vermieden, Elemente auf Blockebene in
Inline-Elemente einzuschließen, sodass die meisten enthaltenden Blöcke aus Elementen auf Blockebene erstellt werden. Sein umschließender Block wird durch die innere Grenze der Vorfahrengrenze gebildet.

Wenn das Element das Attribut „position:fixed“ hat, wird der enthaltende Block durch das Ansichtsfenster erstellt

CSS-Bildzentrierung wird in zwei Situationen unterteilt: CSS-Bildzentrierung und manchmal vertikale Zentrierung Das Bild muss gleichzeitig horizontal zentriert sein.

Es gibt mehrere Zentrierungssituationen:

Horizontale Zentrierung von CSS-Bildern

1 auto, um eine horizontale Zentrierung von Bildern zu erreichen

Mit margin: 0 auto zentrieren Sie das Bild, indem Sie den CSS-Stil margin: 0 auto wie folgt zum Bild hinzufügen:

<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. Verwenden Sie die horizontales Zentrierungsattribut des Textes text-align: center

Der Code lautet wie folgt:

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

CSS-Bild vertikale Zentrierung

1 Verwenden Sie height==Zeilenhöhe Vertikale Zentrierung des Bildes erreichen

Diese Methode erfordert die Angabe der Höhe. Der Code lautet wie folgt:

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

2 Bilder

Die Methode zur Verwendung von Tabelle besteht darin, das vertikale Zentrierungsattribut von Tabelle zu verwenden. Der Code lautet wie folgt:

Hier verwenden wir display:table; und display:table-cell; Diese Methode ist nicht mit IE6/IE7 kompatibel. Wenn Sie IE67 nicht unterstützen müssen, können Sie sie verwenden.

Nachteile: Wenn Sie display:table festlegen Ändern Sie Ihr ursprüngliches Layout

<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. Verwenden Sie die absolute Positionierung, um das Bild vertikal zu zentrieren

Wenn die Breite und Breite des Bildes bekannt sind, kann die Höhe so sein, der Code lautet wie folgt folgt:

<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. Die mobile Seite kann ein Flex-Layout verwenden, um eine vertikale Zentrierung von CSS-Bildern zu erreichen.

Die allgemeinen Browserversionen auf der mobilen Seite sind relativ hoch, sodass Sie sie problemlos verwenden können Flex-Layout (Flex-Layout bezieht sich auf die Flex-Layout-Verwendung von CSS3) Der Demonstrationscode lautet wie folgt:

CSS-Code:

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

HTML-Code:

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

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Drei Arten der Einführung der CSS-Grundsyntax

Boxmodellattribute des CSS-Layouts

Lösung für die Lücke zwischen Bild- und Ansichts-Tags

Informationen zur Formatierung auf Blockebene in CSS

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Textbilder in HTML vertikal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!