css头像堆叠

最新推荐文章于 2023-01-09 17:04:59 发布

ZHWenDong

最新推荐文章于 2023-01-09 17:04:59 发布

阅读量1.8k

点赞数

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/ZHWenDong/article/details/120033005

版权

css 专栏收录该内容

7 篇文章

订阅专栏

这个示例展示了如何使用Flex布局将一组圆形元素居中排列。通过设置`.gorup`类的`display: flex`，`justify-content: center`以及子元素样式，实现了在240px宽的容器内，每个40px*50px的圆形元素间距为1px，底部10px的布局。每个圆形元素内部包含一个带有背景和边框的span，呈现了均匀且居中的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用flex来布局，设置justify-content: center

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.gorup{
				display: flex;
				flex-wrap: wrap;
				width: 240px;
				justify-content: center;
			}
			.gorup>div{
				margin-bottom: 10px;
				margin-right: 1px;
				width: 40px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				color: #fff;
				
			}
			.gorup>div>span{
				display:inline-block;
				width: 50px;
				height: 50px;
				background: gainsboro;
				border-radius: 50%;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="gorup">
			<div><span>1</span></div>
			<div><span>2</span></div>
			<div><span>3</span></div>
			<div><span>4</span></div>
			<div><span>5</span></div>
			<div><span>6</span></div>
			<div><span>7</span></div>
			<div><span>8</span></div>
			<div><span>9</span></div>
		</div>
	</body>
</html>