Maison >interface Web >tutoriel HTML >Comment centrer verticalement un élément div dans tous les navigateurs en utilisant CSS ?
Comment centrer verticalement un élément div dans tous les navigateurs en utilisant CSS ?
- PHPzavant
- 2023-09-07 16:17:02656parcourir
Pour centrer verticalement un élément div dans tous les navigateurs utilisant CSS, utilisez Flexbox. CSS3 propose un autre mode de mise en page, Flexible Box, communément appelé Flexbox. En utilisant ce mode, vous pouvez facilement créer des mises en page pour des applications et des pages Web complexes. Contrairement aux flotteurs, les dispositions Flexbox vous donnent un contrôle total sur la direction, l'alignement, l'ordre et la taille de la boîte.
Les balises sont des conteneurs pour les éléments en HTML. Nous pouvons placer n’importe quel type de contenu dans un div. Commencez par ajouter des éléments, puis stylisez-les en utilisant CSS. Nous ne pouvons désormais centrer le div que verticalement, mais nous pouvons le centrer horizontalement.
Pour centrer le div verticalement, nous utiliserons la propriété flex, propriété align-items. La valeur est définie au centre pour centrer le div. Dans l'exemple ci-dessous, nous définissons l'un des divs sur l'alignement central en utilisant l'attribut align-items avec une valeur centrale -
demo2 {
display: flex;
align-items: center;
height: 60%;
}
Ensuite, définissez le contenu dans la même div demo2 pour l'aligner au centre -
<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>
Exemple
Voyons maintenant un exemple de centrage vertical d'un élément div en utilisant CSS pour tous les navigateurs -
<!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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!