html - 在图像的中心放置一种边框 HTML 和 CSS
问题描述
我需要把这个形象,并将这个风险放在它的中心。有没有任何一种边界可以做到这一点?
HTML:
<div id="discussoes">
<img id ="img-topico" src="botão - criar tópico.png"/>
</div>
解决方案
您可以使用伪元素来做到这一点。这个解决方案很灵活(适用于每个图像/行高)。
HTML
<div class="middle-border">
<img/>
</div>
CSS
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%);
}
结果
推荐阅读
- sql - System.Data.SqlClient 包已安装,但在 Xamarin Forms 应用程序中未被识别为 Using 语句
- java - 如何使用属性文件中的信息实例化一个类?
- java - 如何安全地转换通用通配符“?” Java 中的已知类型参数?
- python - 如何在 AWS SAM 中集中重用自定义 Python 函数?
- javascript - 使用 chartjs 在 React 中创建可滚动的折线图
- sql - 如果在 BigQuery 中的平方根内计算结果为负,如何将数字变为零?
- python - 从Opera获取标签信息的方法
- c# - 如何使用 fulltrustlauncher 终止 uwp 应用程序中的 .exe 文件?
- c - 使用带有 rand() 的位移来允许更大的随机范围
- sharepoint - 有没有办法在 SharePoint 中创建工作“交接”流程?用户在哪里完成任务并将其发送给其他用户以完成附加任务?