文字如何与单选框垂直对齐

今天写代码，写到单选框部分，发现更改完字体和单选框大小之后，两者就不对齐了。代码如下

.type-1{
            font-size: 20px;
        }
        input{
            width: 20px;
            height: 20px;
        }
<div class="choosetype">
        <span class="type-1 ">发动机类型</span>
        <input type="radio" class="check-1" name="type">
        <input type="radio" class="check-1" name="type">
    </div>

效果如图

这个时候我们可以使用vertical-align:text-bottom; 使两者垂直对齐（两个元素大小一样的情况下）

input{
            width: 20px;
            height: 20px;
            vertical-align:text-bottom; 
        }

如果是两者大小不一样，我们可以在先将input转化为行内块级元素（display:inline-block）,然后通过设置margin的方式改变input位置。调节对齐