我不明白为什么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;
}
}
}
如您所见,红色背景比文本略低,尽管它应该垂直居中。
答案 0 :(得分:1)
尝试一下:
style
li:not(:last-child) {
margin-bottom: 10px;
}
li::before {
content: '';
width: 16px;
height: 20px;
display: inline-block;
vertical-align: sub;
background-color: red;
}
答案 1 :(得分:1)
当我使用尺子进行测量时,看起来vertical-align: middle
的行为正确:它位于小写字母的中间。
如果您希望它“完美”,则可能需要更精确。有很多想法,一种是快速的:
position: relative;
top: -1px; // adjust to your desire
更多有关内联元素垂直对齐的信息:https://css-tricks.com/almanac/properties/v/vertical-align/
答案 2 :(得分:1)
它实际上在中间,但是您需要知道什么是中间。
将元素的中间与基线加父元素的x高度的一半对齐。 ref
以下是说明元素的中间与基线对齐以及x-height
的一半的说明。
.operatorscreen__single-button:first-child {
margin-bottom: 10px;
}
.operatorscreen__link {
color: black;
text-decoration: none;
font-size: 18px;
background:
/*plus half x-height*/
linear-gradient(green,green) 0 calc(16px - 0.5ex)/100% 1px no-repeat,
/*the baseline*/
linear-gradient(#000,#000)0 16px/100% 1px no-repeat;
}
.operatorscreen__link:before {
content: "";
display: inline-block;
width: 16px;
height: 20px;
font-size: 100px;
margin-right: 12px;
vertical-align: middle;
background:
linear-gradient(#000,#000) center/100% 1px no-repeat;
background-color: red;
}
<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>
在您的特定情况下,使用top
(或text-top
,text-bottom
,sub
)而不是middle
,您会更接近您期望的
.operatorscreen__single-button:first-child {
margin-bottom: 10px;
}
.operatorscreen__link {
color: black;
text-decoration: none;
font-size: 18px;
background: linear-gradient(#000,#000)center/100% 1px no-repeat;
}
.operatorscreen__link:before {
content: "";
display: inline-block;
width: 16px;
height: 20px;
font-size: 100px;
margin-right: 12px;
vertical-align: top;
background:linear-gradient(#000,#000) center/100% 1px no-repeat;
background-color: red;
}
<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>