CSS 相对于 div 的前 50% 的位置不起作用
CSS position relative top 50% of div doesn't work
我的定位有问题:
我无法在照片和文字上准确设置 top: 50%
和 left: 50%
,因为它不是 50%。我尝试手动设置 50%,更像是 46%。
当我更改 window 的大小时,文本会移动。我不知道该怎么办,我正在寻找答案 2 小时
.photo-box {
background: linear-gradient(250deg, rgba(251, 10, 237, 0.84), rgba(0, 186, 255, 0.91) 50%, rgba(15, 226, 98, 1));
width: 100vw;
text-align: center;
font-size: 30px;
padding-top: 70px;
padding-bottom: 70px;
margin-left: auto;
margin-right: auto;
color: #f0eeee;
font-family: sans-serif;
position: relative;
}
.tytul {
display: flex;
text-align: center;
position: absolute;
top: 46%;
left: 45.3%;
}
.zdj-pierw img {
border-radius: 100px;
align-items: center;
justify-content: center;
}
<div class="photo-box" style="">
<div class="tytul">Strona WWW </div>
<div class="zdj-pierw">
<img src="https://picsum.photos/200/200/?random" width="200" height="200" />
</div>
</div>
您应该在父项上使用 flex
属性,而不仅仅是在您要放置的项目上。
我也将你的 border-radius
更改为 50%
,因为这是一个完美的回合,无论图像的大小如何。
.photo-box {
background: linear-gradient(250deg, rgba(251, 10, 237, 0.84), rgba(0, 186, 255, 0.91) 50%, rgba(15, 226, 98, 1));
width: 100vw;
font-size: 30px;
padding-top: 70px;
padding-bottom: 70px;
color: #f0eeee;
font-family: sans-serif;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.tytul {
position: absolute;
}
.zdj-pierw img {
border-radius: 50%;
}
<div class="photo-box" style="">
<div class="tytul">Strona WWW </div>
<div class="zdj-pierw">
<img src="https://picsum.photos/200/200/?random" width="200" height="200" />
</div>
</div>
我的定位有问题:
我无法在照片和文字上准确设置 top: 50%
和 left: 50%
,因为它不是 50%。我尝试手动设置 50%,更像是 46%。
当我更改 window 的大小时,文本会移动。我不知道该怎么办,我正在寻找答案 2 小时
.photo-box {
background: linear-gradient(250deg, rgba(251, 10, 237, 0.84), rgba(0, 186, 255, 0.91) 50%, rgba(15, 226, 98, 1));
width: 100vw;
text-align: center;
font-size: 30px;
padding-top: 70px;
padding-bottom: 70px;
margin-left: auto;
margin-right: auto;
color: #f0eeee;
font-family: sans-serif;
position: relative;
}
.tytul {
display: flex;
text-align: center;
position: absolute;
top: 46%;
left: 45.3%;
}
.zdj-pierw img {
border-radius: 100px;
align-items: center;
justify-content: center;
}
<div class="photo-box" style="">
<div class="tytul">Strona WWW </div>
<div class="zdj-pierw">
<img src="https://picsum.photos/200/200/?random" width="200" height="200" />
</div>
</div>
您应该在父项上使用 flex
属性,而不仅仅是在您要放置的项目上。
我也将你的 border-radius
更改为 50%
,因为这是一个完美的回合,无论图像的大小如何。
.photo-box {
background: linear-gradient(250deg, rgba(251, 10, 237, 0.84), rgba(0, 186, 255, 0.91) 50%, rgba(15, 226, 98, 1));
width: 100vw;
font-size: 30px;
padding-top: 70px;
padding-bottom: 70px;
color: #f0eeee;
font-family: sans-serif;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.tytul {
position: absolute;
}
.zdj-pierw img {
border-radius: 50%;
}
<div class="photo-box" style="">
<div class="tytul">Strona WWW </div>
<div class="zdj-pierw">
<img src="https://picsum.photos/200/200/?random" width="200" height="200" />
</div>
</div>