我正在尝试找到将一个 div 置于另一个 div 上的最佳方法，该方法使用“顶部”和“左侧”CSS 组件。调整浏览器窗口大小时，圆圈应始终位于框的中心，但在缩放时会稍微水平移动这是我正在使用的代码； https://codepen.io/EarlGrey8/pen/LYVOQrYbody { background-color: #908787;}.banner { position: fixed; width: 101%; margin: -1%; height: 35%; background-color: #76568e;}.moduleContainer { position: absolute; font-family: 'Bellota', cursive; background-color: #e2e2e2; top: 25%; left: 20%; border-style: solid; border-radius: 20px; border-color: #cacaca; width: 60%; height: 400px;}.moduleInner { display: inline-block; position: relative; top: -130px; width: 100%; height: 70%;}.moduleImage { position: relative; border-radius: 100%; background-color: #908787; height: 250px; width: 250px; top: -130px; left: 33%;}<body> <div class="banner"></div><div class="moduleContainer"> <div class="moduleImage"></div> <div class="moduleInner"></div></div></body>
4 回答
慕容3067478
TA贡献1773条经验 获得超3个赞
使圆在任何屏幕上居中。尝试以下 CSS。
.moduleImage {
left: 50%;
transform: translateX(-50%);
}
潇湘沐
TA贡献1816条经验 获得超6个赞
您可以使用 calc css3calc 参见示例：
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: relative;
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: calc(50% - 125px); /* just this line changed */
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
<link rel="stylesheet" href="simple.css">
</head>
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
</html>
一切都一样。
就在.moduleImage课堂上我将 left 属性更改为left: calc(50% - 125px);
125px 是元素宽度的一半。
慕无忌1623718
TA贡献1744条经验 获得超4个赞
改变，.moduleImage财产。positiontransform
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: absolute; /* change */
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: 50%;
transform: translateX(-50%); /* change */
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
<link rel="stylesheet" href="simple.css">
</head>
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
</html>
慕姐8265434
TA贡献1813条经验 获得超2个赞
更新你的代码
.moduleContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 50%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
height: 70%;
}
.moduleImage {
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
}
我希望这个工作
- 4 回答
- 0 关注
- 114 浏览
添加回答
举报
0/150
提交
取消