So verwenden Sie den CSS-Stil, um die Schriftart in der Tabelle vertikal zu zentrieren

So können Sie mithilfe des CSS-Stils die Schriftart in der Tabelle vertikal zentrieren:

Es gibt eine benutzerdefinierte Tabelle wie unten gezeigt. Wenn sich die zurückgegebenen Daten ändern, kann der Text automatisch zentriert werden.

//html  
//Verwende zwei Divs als Container <el-col :span="3" class="col_row1">
                 <div Klasse="Rasterinhalt1">
                  <div Klasse="Betreff1">{{Artikel.Betreff1}}</div>
                  </div>  
              </el-col>
// CSS
      .grid-content1 {
            // Breite: 3,125rem;
            Breite: 100 %;
            Höhe: 3,75rem;
            Anzeige: Tabelle;
          }
          .Betreff1 {
            Anzeige: Tabellenzelle;
            vertikale Ausrichtung: Mitte;
          }

Ergänzung: Schauen wir uns den CSS-Stil unten an - Schrift vertikal und horizontal zentriert

<div class="tt">La La La</div>

 .tt{
            Polsterung: 0px;
            Breite: 500px;
            Höhe: 200px;
            Textausrichtung: zentriert;
            Hintergrundfarbe: #F69;

            Anzeige: Tabellenzelle;
            vertikale Ausrichtung: Mitte
        } 

Warum, das ist so. In Ordnung. Sehen Sie sich den Stil display: table-cell an, der als Tabellenzelle angezeigt wird. Auf diese Weise wird vertical-align:middle wirksam. Ohne Displayabnahme funktioniert es nicht! !

1. Grundlegende Konzepte

Zunächst einmal ist es immer noch ein Konzept. Es ist wichtig, Inline-Elemente und Blockelemente einzuführen, da einige Attribute nur für Blockelemente verwendet werden können, während andere genau das Gegenteil sind. Unter bestimmten Umständen können sie auch ineinander umgewandelt werden, z. B. indem sie über die Anzeige festgelegt werden.

1. Inline-Elemente (auch Inline-Elemente genannt):

(1) Es nimmt nicht eine ganze Zeile ein, sondern hängt vom Inhalt ab. Es weist folgende Merkmale auf:

(2) Sie können weder Breite noch Höhe noch Zeilenhöhe festlegen. Die Breite erhöht sich mit dem Inhalt und die Höhe ändert sich mit der Schriftgröße.

(3) Inline-Elemente können äußere Ränder haben, diese wirken sich jedoch nicht auf die Ober- und Unterseite aus, sondern nur auf die linke und rechte Seite.

(4) Sie können auch innere Ränder festlegen, aber in IE6 funktionieren innere Ränder oben und unten nicht, sondern nur links und rechts.

Häufig verwendete Inline-Elemente sind: a - Anker, b - Fett (nicht empfohlen), br - Zeilenumbruch, em - Hervorhebung, font - Schrifteinstellung (nicht empfohlen), i - Kursiv, img - Bild, input - Eingabefeld, label - Tabellenbeschriftung,

select - Elementauswahl, small - Text in kleiner Schrift, span - häufig verwendeter Inline-Container, definiert den Textblock, strike - mittlerer Strike, strong - fette Hervorhebung

1. Blockelement:

(1) Beginnt immer in einer neuen Zeile und nimmt eine ganze Zeile ein;

(2) Höhe, Zeilenhöhe, Ränder und Polsterung können alle gesteuert werden;

(3) Die Breite entspricht immer der Browserbreite, unabhängig vom Inhalt.

(4) Es kann Inline-Elemente und andere Blockelemente enthalten.

Häufig verwendete Blockelemente sind: div – das am häufigsten verwendete Blockelement, dl – ein mit dt dd verwendetes Blockelement, form – interaktives Formular, h1 – großer Titel, hr – horizontaler Trenner, ol – sortiertes Formular, p – Absatz, ul – nicht sortiert

Listenkonvertierung: Verwenden Sie die Anzeigeeinstellung, um Inline-Elementen die Eigenschaften von Elementen auf Blockebene zu verleihen und umgekehrt

2. Lassen Sie uns nun über einige einfache grundlegende Zentriermethoden sprechen

1. Text im Block horizontal zentrieren: Text-Align wird für Elemente auf Blockebene verwendet und wirkt auf den Text oder die Bilder in den Blockelementen, die es verwenden. Damit sie horizontal zentriert sind.

Diese Eigenschaft kann nur auf Blockelemente angewendet werden (oder Inline-Elemente, die durch CSS als Blockelemente gesteuert werden, nicht jedoch auf Blockelemente, die als Inline-Elemente gesteuert werden). Kurz gesagt, jene Elemente, die die Eigenschaften von Blockelementen haben. Das ist leicht zu verstehen. Die Zentrierung muss zeilenzentriert erfolgen. Wenn das Element, das sie verwendet, keinen vollständig unabhängigen Raum in der Breite hat, kann es den Text oder das Bild darin sicherlich nicht zentrieren.

Dieses Attribut des übergeordneten Elements wirkt sich auch auf die untergeordneten Elemente aus. Wenn beispielsweise ein Div auf Textausrichtung eingestellt ist, kann der darin enthaltene Text zentriert werden, und der Text in seinem untergeordneten Div kann ebenfalls zentriert werden. Die Zentrierung des Textes im untergeordneten Element erfolgt jedoch im untergeordneten Div und nicht im übergeordneten Div. Das heißt, der gesamte Text darin wird relativ zur nächstgelegenen Div-Ebene zentriert. Daher kann diese Eigenschaft nicht verwendet werden, um ein Div innerhalb seines übergeordneten Divs zu zentrieren. (Nicht nur Divs, alle Elemente, die sich wie Blockelemente verhalten).

2 Blockelemente werden horizontal zentriert (Block mit eingestellter Breite bestimmen): Rand. Dies ist Ihnen auf jeden Fall bewusst, wenn Sie zum ersten Mal mit CSS in Berührung kommen.

Im Allgemeinen können Sie margin:0 auto festlegen. Dadurch wird das Blockelement in seinem übergeordneten Element zentriert, und zwar oben, unten, links und rechts.

Wenn Sie es nur horizontal zentrieren möchten, setzen Sie margin-left:auto;margin-right:auto ;

3 Blockelemente sind horizontal zentriert (Blöcke unbestimmter Breite):

In einigen anderen Artikeln habe ich viele Methoden gesehen, um die Zentrierung von Blöcken ungewisser Breite einzuführen.

Um es einfach auszudrücken: Es besteht eigentlich kein Grund, sich so viel Mühe zu geben. Wir können es so verstehen: Ein Block ohne explizit festgelegte Breite belegt standardmäßig eine einzelne Zeile, je nach der Art der Elemente auf Blockebene. Zu diesem Zeitpunkt hat der Block selbst also die Breite des Browserfensters, und es besteht keine Notwendigkeit, eine horizontale Zentrierung festzulegen.

Wenn der Inhalt im Block zu diesem Zeitpunkt zentriert ist:

Wenn die untergeordneten Elemente eines Blockelements ebenfalls Blockelemente sind, können Sie für die untergeordneten Elemente margin auto oder etwas Ähnliches verwenden.

Wenn das untergeordnete Element des Blockebenenelements ein Inline-Element ist, kann die Textausrichtung, die wir zu Beginn eingeführt haben, das Problem ebenfalls lösen.

Für Blockelemente können Sie die Anzeige auch auf Inline setzen und dann Text-Align verwenden.

4. vertical-align wird zur vertikalen Zentrierung von Inline-Elementen verwendet

vertical-align, dies kann sehr komplex eingesetzt werden. Nachdem ich einige Artikel und Beispiele gelesen habe, bin ich etwas verwirrt. Ich werde nur über die einfachste Verwendung sprechen:

Diese Eigenschaft wird verwendet, um

1. Inline-Elemente (und in Inline-Elemente umgewandelte Blockelemente)

2. Elemente, deren Anzeige auf Tabellenzelle eingestellt ist,

In Firefox und IE8 können Sie den Anzeigewert des Blockebenenelements auf „table-cell“ setzen, um das Attribut „vertikale Ausrichtung“ zu aktivieren. Der Anzeigeeffekt ist derselbe wie bei valign="center" in der Tabelle. Aber IE6,7 unterstützt dies nicht.

3. Elemente wie <td><tr>

Durch Schreiben wie folgt: vertical-align:middle; kann die vertikale Mitte von Text oder Bildern festlegen. Solange dieses Attribut für ein Element mit den Eigenschaften eines Inline-Elements verwendet wird, funktioniert es auch für Text und Bilder in seinen untergeordneten Elementen. Der Effekt besteht jedoch darin, den Text oder das Bild relativ zum übergeordneten Element zu zentrieren, das ihm am nächsten ist. Dies ähnelt dem oben erwähnten Teil zur Textausrichtung.

5. Text und Bilder in Blockelementen vertikal zentrieren (wird durch die Höhe des Blocks bestimmt. Das stammt aus einem anderen Blog. Es ist wirklich nützlich, wenn sich nur diese Texte im Block befinden)

Die Eigenschaft „Vertical-Align“ kann Text in einer Ebene (Blockelement) nicht vertikal zentrieren. Hier ist eine clevere Möglichkeit, die Höhe auf den gleichen Wert wie line-height einzustellen!

<div Stil="Zeilenhöhe:500px;Höhe:500;"></div>

6. Text und Bilder in Blockelementen vertikal zentrieren (Blockhöhe ist ungewiss)

Wenn die Höhe eines Blocks ungewiss ist, hängt seine Höhe tatsächlich von der Höhe des darin enthaltenen Inhalts ab. Wenn sich darin nur Text oder Bilder befinden, werden diese automatisch vertikal zentriert und müssen nicht speziell festgelegt werden.

Wenn Sie wirklich etwas festlegen möchten, zum Beispiel wenn der Block größer sein soll und der Text vertikal zentriert im Block sein soll, können Sie die Polsterung festlegen, zum Beispiel padding-top:20px;padding-bottom:20px ;

Wenn der obere und untere Rand unterschiedlich eingestellt sind, erfolgt natürlich keine Zentrierung.

7. Vertikale Zentrierung von Blockebenenelementen

Um die vertikale Mitte des Blockebenenelements im übergeordneten Element festzulegen, können Sie auf die Methode zur horizontalen Zentrierung von Blockebenenelementen (siehe oben) zurückgreifen und die Ränder festlegen. Wenn Sie keine horizontale Zentrierung festlegen möchten, stellen Sie die oberen und unteren Ränder einfach auf „Automatisch“.

Sie können auch vertical-align:middle; verwenden. Voraussetzung ist jedoch, dass die Anzeige auf die Tabellenzelle eingestellt ist. Achten Sie in diesem Fall bitte auf Probleme mit der Browserkompatibilität.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von CSS-Stilen zur vertikalen Zentrierung von Schriftarten in einer Tabelle. Weitere relevante Inhalte zur vertikalen Zentrierung von CSS-Tabellenschriftarten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!