多个div垂直居中横向排列（附代码）

云罗郡主

Lepaskan： 2018-10-19 15:23:48

ke hadapan

5099 orang telah melayarinya

本篇文章给大家带来的内容是关于多个div垂直居中横向排列（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

父级p，子级p高度都为自适应。

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

Salin selepas log masuk

以上就是对的全部介绍，如果您想了解更多有关CSS视频教程，请关注PHP中文网。

Atas ialah kandungan terperinci 多个div垂直居中横向排列（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

div垂直居中横向排列

sumber：csdn.net

Artikel sebelumnya：CSS实现对话框效果如何实现（代码） Artikel seterusnya：CSS怎么实现自适应正方形？有代码吗

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang