Plusieurs divs sont disposés verticalement, centrés et horizontalement (avec code)

云罗郡主

Libérer： 2018-10-19 15:23:48

avant

5058 Les gens l'ont consulté

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.

Plusieurs 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>

Copier après la connexion

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!

Étiquettes associées：

div垂直居中横向排列

source：csdn.net

Article précédent：Comment implémenter l'effet de boîte de dialogue avec CSS (code) Article suivant：Comment implémenter des carrés adaptatifs en CSS ? Y a-t-il un code ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur