Maison > Article > interface Web > Plusieurs divs sont disposés verticalement, centrés et horizontalement (avec code)
Plusieurs divs sont disposés verticalement, centrés et horizontalement (avec code)
- 云罗郡主avant
- 2018-10-19 15:23:235073parcourir
Le contenu de cet article concerne la disposition verticale, centrée et horizontale de plusieurs divs (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
La taille du parent p et de l'enfant p sont adaptatives.
 "153993366828695Plusieurs divs sont disposés verticalement, centrés et horizontalement (avec code)")
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style>
#mine {
width: 500px;
height:500px;
background: #f00;
margin: 0 auto;
display: flex;
}
.center {
/*flex: 1;*/
/*width: 100px;
height: 100px;*/
background: #0f0;
margin:auto;
}
</style>
</head>
<body>
<p id="mine">
<p class="center">一</p>
<p class="center">二</p>
<p class="center">三</p>
</p>
</body>
</html> Ce qui précède est très bien si vous voulez en savoir plus sur Tutoriel vidéo CSS . , veuillez faire attention au site Web PHP chinois.
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!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment implémenter l'effet de boîte de dialogue avec CSS (code)Article suivant：Comment implémenter l'effet de boîte de dialogue avec CSS (code)