我正在嘗試找到將一個 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 關注
- 227 瀏覽
添加回答
舉報
0/150
提交
取消