gpt4 book ai didi

html - 对齐两个带圆圈的 div

转载 作者:行者123 更新时间:2023-11-28 17:23:44 24 4
gpt4 key购买 nike

我试图对齐这两个 div 但没有成功。我希望黑色圆圈位于白色圆圈内。我怎样才能做到这一点?为什么 vertical-align: middle 不起作用?有什么建议么?

谢谢。

    .discOuter {
background: #fff;
border: 1px solid #dedede;
border-radius: 100%;
height: 178px;
margin-bottom: 18px;
width: 178px;
}

.discInner {
background: #000;
border-radius: 100%;
height: 155px;
width: 155px;
margin: 19px;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="services">
<ul>
<li>
<div class="discOuter">
<div class="discInner"></div>
</div>
</li>
</ul>
</body>
</html>

最佳答案

尝试使用 transform css 属性

.discOuter {
background: #fff;
border: 1px solid #dedede;
border-radius: 100%;
height: 178px;
margin-bottom: 18px;
width: 178px;
/**/
position: relative;
}
.discInner {
background: #000;
border-radius: inherit;
height: 155px;
width: 155px;
/**/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Working Fiddle

关于html - 对齐两个带圆圈的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27591073/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com