在编写一些表单时,我们使用红色*号,作为必填项,我们一般都想要红色星号能够垂直居中显示,看起来更美观:
.xing {
font-size: 30px;
color: #f00;
}
<h3>如果是<span class="xing">*</span>则必填</h3>
结果如下:
所以我们需要添加css样式:
.xing {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
text-align: center;
line-height: 26px;
font-size: 30px;
color: #f00;
}
原因:
通过display:inline-block;将span变成内联块元素,在给它高度和宽度,使用vertical-align: middle;让它垂直居中,但这样还不行,还需要通过line-height来上下微调;