我有一个带图像的背景,在这个背景中我有 3 个图像和 3 个数字。我想为每个数字,将数字与图像居中。
我被属性 margin-left
.background-picture-red{
height: 130px;
width: 100%;
position: absolute;
background-image: url(https://i.ibb.co/jVWdfG4/bg-2.jpg);
}
.picture01{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 50px;
z-index: 1;
position: relative;
}
.picture01-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: 50px;
margin-top: 100px;
position: absolute;
}
.picture02{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 60px;
z-index: 1;
position: relative;
}
.picture02-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: 50px;
margin-top: 100px;
position: absolute;
}
.picture03{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 70px;
z-index: 1;
position: relative;
}
.picture03-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
<div class="background-picture-red">
<img class="picture01" src="https://i.ibb.co/n3fv0YY/bitcoin34.png">
<span class="picture01-title">138</span>
<img class="picture02" src="https://i.ibb.co/qRSr1Wr/bitcoin46.png">
<span class="picture02-title">258</span>
<img class="picture03" src="https://i.ibb.co/BwT7gHz/bitcoin68.png">
<span class="picture03-title">303</span>
</div>
最佳答案
这是我在每个标题中添加的一个工作示例:
margin-left: -43px;
transform:translateX(-50%);
margin-left: -43px
: 因为你的图片大小是86px
所以-43px
会放在图片中间translateX(-50%)
:因此文本将根据其自身的大小居中
.background-picture-red{
height: 130px;
width: 100%;
position: absolute;
background-image: url(https://i.ibb.co/jVWdfG4/bg-2.jpg);
}
.picture01{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 50px;
z-index: 1;
position: relative;
}
.picture01-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: -43px;
transform:translateX(-50%);
margin-top: 100px;
position: absolute;
}
.picture02{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 60px;
z-index: 1;
position: relative;
}
.picture02-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: -43px;
transform:translateX(-50%);
margin-top: 100px;
position: absolute;
}
.picture03{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 70px;
z-index: 1;
position: relative;
}
.picture03-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: -43px;
transform:translateX(-50%);
margin-top: 100px;
position: absolute;
}
<div class="background-picture-red">
<img class="picture01" src="https://i.ibb.co/n3fv0YY/bitcoin34.png">
<span class="picture01-title">138</span>
<img class="picture02" src="https://i.ibb.co/qRSr1Wr/bitcoin46.png">
<span class="picture02-title">258</span>
<img class="picture03" src="https://i.ibb.co/BwT7gHz/bitcoin68.png">
<span class="picture03-title">303</span>
</div>
但也许你应该使用 flexbox做那种事。
关于html - 几张带标题的图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53938065/