时间戳

首页 > 解决方案 > 如何在 CSS 中的 div 中居中两个重叠的圆圈？

html - 如何在 CSS 中的 div 中居中两个重叠的圆圈？

问题描述

我试图在一个 div 中居中两个重叠的圆圈，但由于 margin-right -100 的样式，它不起作用。这就是导致它们重叠的样式。我试图在它周围的 div 上设置 margin: 0 auto 的样式，但它不起作用。我还尝试使用一些引导程序并制作列来帮助它们居中，但到目前为止没有任何效果。我在下面添加了一个 codepen 以进行适当的演示。

#projects {
	background-color: #3f4756;
	width: 100%;
	height: auto;
	text-align: center;
	padding-top: 15em; 
	padding-bottom: 10em;
	margin: 0 auto;
}

#projects h2{
	color: white;
	font-family: BrandonGrotesque, Brandon Grotesque;
	font-size: 3.75em;
	margin-bottom: 1.5em;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 2px;


}
.circle {
	display: inline-block;
	height: 30em;
	width: 30em; 
	line-height: 18px;
	border-radius: 50%;
	color: white;
	margin: 0 0 0 -100px; 
	

}

#projects > a:nth-child(3){ 
	position: relative;
	z-index: 1;
	background-color:#a3abbd;
	text-decoration: underline;


}
#projects > a:nth-child(2){ 
	position: relative;
	z-index: 2;
	background-color: #a4844e;
	text-decoration: underline;


}
#projects > a:nth-child(2) > p, #projects > a:nth-child(3) > p {
	margin-top: 4em;
	font-size: 3em;
	font-family: BrandonGrotesque, Brandon Grotesque;
	font-weight: 350;
	
	
}
<div id="projects" class="skew">
					<h2>My Projects</h2>
					<a href="#" class="circle">
						<p>web</p>
					</a>
					<a href="#" class="circle">
						<p>graphics</p>
					</a>
	</div>

标签： htmlcss

解决方案

我不确定这是否正是您想要使圆圈居中的方式，所以我将两个圆圈div连续居中，一个与另一个略微重叠。您可以在这里查看它的外观。

你可以看到我使用Flexbox来实现这个结果。我将两个圆圈都包裹在div我使用的display: flex. 最重要的是，我再次将每个圆圈的文本居中在div, using和相关的 flexbox 属性中。display: flex

显然，您现在可以根据自己的喜好使用每个圆圈的大小。

希望能帮助到你。

推荐阅读