在HTML和CSS图像的中心放置一种边框
我需要把这张照片放在心上,同时也要把风险放在中心位置。有什么边界可以让这一切发生吗 HTML:在HTML和CSS图像的中心放置一种边框,html,css,Html,Css,我需要把这张照片放在心上,同时也要把风险放在中心位置。有什么边界可以让这一切发生吗 HTML: 您可以使用伪元素来完成。 此解决方案非常灵活(适用于每个图像/线条高度) HTML <div class="middle-border"> <img/> </div> 结果 <div class="middle-border"> <img/> </div> img {
您可以使用伪元素来完成。 此解决方案非常灵活(适用于每个图像/线条高度) HTML
<div class="middle-border">
<img/>
</div>
结果
<div class="middle-border">
<img/>
</div>
img {
width: 80px;
height: 80px;
background: blue;
display: block;
margin: 0 auto;
z-index: 2;
position: relative;
}
.middle-border {
position: relative;
background: yellow;
text-align: center;
}
.middle-border::before {
content: "";
display: block;
height: 5px;
background: red;
width: 100%;
position: absolute;
z-index: 1;
top: 50%;
transform: translateY(-50%);
}