红色*号字符垂直居中显示

在编写一些表单时，我们使用红色*号，作为必填项，我们一般都想要红色星号能够垂直居中显示，看起来更美观：

  .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来上下微调；