css - 内联块中带有垂直对齐的居中图标
问题描述
我不明白为什么vertical-align: middle
让图标不居中,而是稍微低一点。
HTML:
<ul class="operatorscreen__buttons">
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">First icon</a>
</li>
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">Second</a>
</li>
</ul>
scss:
.operatorscreen {
&__single-button {
&:first-child {
margin-bottom: 10px;
}
}
&__link {
color: black;
text-decoration: none;
font-size: 18px;
&:before {
content: "";
display: inline-block;
width: 16px;
height: 20px;
font-size: 100px;
margin-right: 12px;
vertical-align: middle;
background-color: red;
}
}
}
如您所见,红色背景比文本略低,但它应该垂直居中。
解决方案
试试看:
li:not(:last-child) {
margin-bottom: 10px;
}
li::before {
content: '';
width: 16px;
height: 20px;
display: inline-block;
vertical-align: sub;
background-color: red;
}
<ul>
<li>First icon</li>
<li>Second icon</li>
</ul>
推荐阅读
- python - 页面渲染时自动登录 Neo4j
- kubernetes - Kubernetes 动态 Pod 供应
- html - 如何一起减少或增加 CSS 中的大小?
- java - 如何修复“java未命名模块从y和z读取包x”
- kotlin - 为什么这个演员不会失败?
- ios - 如何从包含字典的数组中检索和显示表格视图中的数据?
- python - 使用内置的“重塑”功能将图像分割成更小的块
- python - 如果另一列上的值相同,则将 pandas 列的所有值更改为第一次出现
- android - 如何使一个区域的程序化截图与相应的纹理视图相匹配?
- python - 尽管从安装目录执行,但找不到命令“blender”