suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie verwende ich display:table-cell, um eine vertikale Zentrierung zu erreichen?

Wie verwende ich display:table-cell, um eine vertikale Zentrierung zu erreichen?

不言
不言Original
2018-10-24 15:26:255110Durchsuche

Im Webseiten-Layout müssen wir häufig Bilder oder Texte vertikal zentrieren. Es gibt viele Möglichkeiten, eine vertikale Zentrierung mithilfe des display:table-cell-Attributs zu erreichen Schauen Sie sich unten den spezifischen Inhalt an.

Werfen wir zunächst einen kurzen Blick auf das display:table-cell-Attribut

das display:table-cell-Attribut bedeutet, dass das Beschriftungselement angezeigt wird B. die Form einer Tabellenzelle, ähnlich dem td-Tag, verwenden Sie display:table-cell, um Elemente mit nicht festen Größen vertikal zu zentrieren.

Als nächstes schauen wir uns ein konkretes Beispiel dafür an, wie display:table-cell eine vertikale Zentrierung erreicht: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
        .img{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 200px;
            height: 300px;
            border: 1px solid lightgreen;
            background-color: lightblue;
        }
        .text{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 300px;
            border: 1px solid lightgreen;
            padding: 10px;
             background-color: lightblue;
        }
</style>
</head>
<body>
<div>
        <div>
            <img src="image/girl.jpg" width="80px" height="100px" alt="">
        </div>
        <div>
            <p>php中文网在线免费教程 </p>
        </div>
    </div>
</body>
</html>

display:table-cell erreicht eine vertikale Zentrierung wie folgt:

Wie verwende ich display:table-cell, um eine vertikale Zentrierung zu erreichen?

Hinweis: 1. IE6/7 unterstützt das display:table-cell-Attribut nicht. 2. table-cell unterstützt das margin-Attribut nicht (unterstützt jedoch das Auffüllen), was sehr wichtig ist starr; 3. Versuchen Sie, es nicht gleichzeitig mit Floating/Positionierung zu verwenden, da dies seine CSS-Eigenschaften zerstört.

Das Obige ist der gesamte Inhalt dieses Artikels. Weitere Informationen zum Attribut display:table-cell finden Sie auf der chinesischen PHP-Website CSS-Lernhandbuch.

Das obige ist der detaillierte Inhalt vonWie verwende ich display:table-cell, um eine vertikale Zentrierung zu erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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：Was bedeutet Anzeigeblock? Wie benutzt man es?Nächster Artikel：Was bedeutet Anzeigeblock? Wie benutzt man es?

In Verbindung stehende Artikel

Mehr sehen