Das Schöne an der kombinierten Verwendung von display:table und display:table-cell in CSS

Der Inhalt dieses Artikels besteht darin, die Vorteile von display:table und display:table-cell in CSS vorzustellen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Tabelle und Tabellenzelle des Displays werden im Allgemeinen nicht oft verwendet, daher schenken ihnen nur wenige Menschen Beachtung, aber die beiden werden Sie überraschen, wenn sie ihre Kräfte bündeln!

Hier stellt sich die Frage: Wie kann man mehrzeiligen Text in einem Block vertikal zentrieren? Wenn es um vertikale Zentrierung geht, denken Sie an die vertikale Zentrierung einer einzelnen Textzeile. Die Zeilenhöhe entspricht der vertikalen Zentrierung von Elementen auf Blockebene, der Positionierung oder dem flexiblen Layout. Aber hier stelle ich display:table und table-cell vor, wie man mehrzeiligen Text vertikal zentriert. Obwohl es sich nicht so anfühlt, als würde es oft verwendet, ist es dennoch zu bestimmten Zeiten nützlich, wie folgt:

Geben Sie den Code direkt ein:

html:

    <p>
        </p><p>会议认为，党的十八大以来，我国经济发展取得历史性成就、
                     发生历史性变革，为其他领域改革发展提供了重要物质条件。经济实力
                     再上新台阶，经济年均增长7.1%，成为世界经济增长的主要动力源和稳定器。
        </p>
    

css:

       .parent {
           display: table;
           width: 300px;
           height: 300px;
           text-align: center;
       }
       .son  {
           display: table-cell;
           height: 200px;
           background-color: yellow;
           vertical-align: middle;
       }

Nach dem Lesen des Codes haben Sie sofort verstanden, dass wir hier nur den Container auf display:table einstellen müssen und dann wird es zu einem Bei Tabellenelementen auf Blockebene macht das Unterelement display:table-cell das Unterelement zu einer Tabellenzelle und fügt dann, genau wie in der Tabelle, Vertical-Align: Middle zum Unterelement hinzu. und der mehrzeilige Text wird vertikal zentriert. Ist es nicht sehr direkt und prägnant?

Das obige ist der detaillierte Inhalt vonDas Schöne an der kombinierten Verwendung von display:table und display:table-cell in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!