Heim >Web-Frontend >HTML-Tutorial >Wie zentriere ich ein div-Element in allen Browsern mithilfe von CSS vertikal?
Wie zentriere ich ein div-Element in allen Browsern mithilfe von CSS vertikal?
- PHPznach vorne
- 2023-09-07 16:17:02686Durchsuche
Um ein div-Element in allen Browsern, die CSS verwenden, vertikal zu zentrieren, verwenden Sie Flexbox. CSS3 bietet einen weiteren Layoutmodus, Flexible Box, allgemein bekannt als Flexbox. Mit diesem Modus können Sie ganz einfach Layouts für komplexe Anwendungen und Webseiten erstellen. Im Gegensatz zu Floats haben Sie bei Flexbox-Layouts die vollständige Kontrolle über die Richtung, Ausrichtung, Reihenfolge und Größe der Box.
Tags sind Container für Elemente in HTML. Wir können jede Art von Inhalt in einem Div platzieren. Fügen Sie zunächst Elemente hinzu und formatieren Sie sie dann mit CSS. Wir können das Div jetzt nur vertikal zentrieren, können es aber horizontal zentrieren.
Um das Div vertikal zu zentrieren, verwenden wir die Flex-Eigenschaft und die Eigenschaft align-items. Der Wert wird auf „center“ gesetzt, um das Div zu zentrieren. Im folgenden Beispiel stellen wir eines der Divs auf zentrierte Ausrichtung ein, indem wir das Attribut align-items mit einem Mittelwert -
verwendendemo2 {
display: flex;
align-items: center;
height: 60%;
}
Stellen Sie dann den Inhalt im selben Div demo2 auf zentrierte Ausrichtung ein -
<div class="demo2"> <img src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg" alt="Archery Tutorial"> <p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a bow and hit a fixed target.</p> </div>
Beispiel
Sehen wir uns nun ein Beispiel für die vertikale Zentrierung eines div-Elements mithilfe von CSS für alle Browser an -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Div Elements</title>
</head>
<style>
body,
html {
height: 100%;
}
.demo2 {
display: flex;
align-items: center;
height: 60%;
}
.demo1,
.demo2 {
border: 2px solid skyblue;
background-color: blue;
color: white;
}
</style>
<body>
<h1>Archery Tutorial</h1>
<div class="demo1">
<img src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg"
alt="Archery Tutorial">
<p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a
bow and hit a fixed target.</p>
</div>
<p>Let us now center the div elements: </p>
<div class="demo2">
<img src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg"
alt="Archery Tutorial">
<p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a
bow and hit a fixed target.</p>
</div>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie zentriere ich ein div-Element in allen Browsern mithilfe von CSS vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!