gpt4 book ai didi

html - 圆形div,纵横居中对齐

转载 作者:太空宇宙 更新时间:2023-11-03 21:50:34 25 4
gpt4 key购买 nike

我有以下代码:

<!DOCTYPE html>
<html>
<head>
<style>
#playhead-outercircle{
width:10px;
height:10px;
border-style:solid;
border-width:1px;
border-radius:100px;
cursor:pointer;
}
#playhead-innercircle{
width:7px;
height:7px;
border-style:solid;
border-width:1px;
border-radius:100px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="playhead">
<div id="playhead-outercircle"><div id="playhead-innercircle"></div></div>
</div>
</body>
</html>

这是它的样子:

output

如何让内部 div 垂直和水平显示在父级的中间?

请帮忙...

提前谢谢你!

最佳答案

如果您打算保持相同的尺寸,只需将填充添加到 #playhead-outercircle

#playhead-outercircle {
width:10px;
height:10px;
border-style:solid;
border-width:1px;
border-radius:100px;
cursor:pointer;
padding: 1px 0 0 1px;
}

演示 - jsFiddle

关于html - 圆形div,纵横居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17628781/

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