suchen

Heim >Web-Frontend >CSS-Tutorial >So zentrieren Sie Fotos vertikal mit CSS

So zentrieren Sie Fotos vertikal mit CSS

WBOY
WBOYOriginal
2021-12-02 17:15:158030Durchsuche

Methode: 1. Fügen Sie dem übergeordneten Element des Fotoelements einen relativen Positionierungsstil und dem Fotoelement einen absoluten Positionierungsstil hinzu. 2. Verwenden Sie das Top-Attribut und das „Margin-Top“-Attribut, um das Foto so einzustellen, dass es vertikal zentriert ist . Fügen Sie einfach den Stil „top“ zum Fotoelement „:50%;margin-top:top margin value;“ hinzu.

So zentrieren Sie Fotos vertikal mit CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So zentrieren Sie ein Foto vertikal mit CSS

Verwenden Sie die absolute Positionierung, um eine vertikale Zentrierung zu erreichen

1 Fügen Sie dem übergeordneten Element von img ein relatives Positionierungsattribut (Position: relativ) hinzu und Fügen Sie dem untergeordneten Element, dem Bild-img-Element, ein relatives Positionierungsattribut (Position: relativ) hinzu. Fügen Sie ein absolutes Positionierungsattribut (Position: absolut) hinzu.

2. Setzen Sie das Top-Attribut des Bildelements auf 50 %.

3. Jetzt müssen wir einen negativen Rand-Top-Wert für das img-Element festlegen. Dieser Wert ist die Hälfte der Höhe des Elements, das Sie vertikal zentrieren möchten kann margin-top nicht verwenden. Verwenden Sie das Attribut transform:translateY(-50%).

Denken Sie daran: Wenn Sie gleichzeitig eine horizontale Zentrierung erreichen möchten, können Sie die gleiche Technik wie bei der vertikalen Zentrierung verwenden.

Das Beispiel sieht wie folgt aus: 

<html>
<head>
<style type="text/css">
.posdiv{
    width: 300px;
    height: 250px;
    position: relative; 
    border:1px solid red;
    }
.posdiv img{
    width: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    }
</style>
</head>
<body>
<div class="posdiv">
    <img src="1118.02.png" alt="">
</div>
</body>
</html>

Ausgabeergebnis:

So zentrieren Sie Fotos vertikal mit CSS

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Fotos vertikal mit CSS. 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：So deaktivieren Sie die linken und rechten Bildlaufleisten der Seite in CSSNächster Artikel：So deaktivieren Sie die linken und rechten Bildlaufleisten der Seite in CSS

In Verbindung stehende Artikel

Mehr sehen