如何在<h1>标记内垂直对齐图像

Question

HTML

<h1>abc abc<span><img class="goldT" src="btns/nav02.png"></span></h1>  

CSS

h1{
    margin:15px 0 15px 20px;
    font-size:1.1rem;
    font-weight:bold;
    background:#e1e1e1;
    padding-left:10px;
    color: #444444;
}
h1 span{
    float:right;
    margin-right:14px;
}
h1 .goldT{
    width:140px;
    vertical-align:middle;
}  

如何保持img goldT垂直居中于标题文本abc.

这是FIDDLE

Answer 1

尝试:

HTML:

<h1>
    <span class="text">abc abc</span><span class="span">
        <img class="goldT" src="https://www.google.com/images/srpr/logo11w.png">
    </span>
</h1>

CSS:

.span, .text {
    vertical-align:middle;
    display:table-cell;
}
h1 {
    display:table;
    width:100%;
}

在这里小提琴

Answer 2

使用顶部边距。前任 ：margin-top: -13px;

样本