How to vertically align an image inside a <h1> tag

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;
}  

How can I keep img goldT vertically centered with header text abc.

Here is the FIDDLE

Answer 1

Try:

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%;
}

Fiddle here.

Answer 2

A much simpler solution is as follows:

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

On the h1 set a line-height and on the image and span set a vertical-align:middle;. Worked for me.

Answer 3

Try this here we can make image vertically center

Try this http://jsfiddle.net/SxxWV/10/

HTML

<div class="main">
<div class="box"><img  src="https://www.google.com/images/srpr/logo11w.png" />
</div>   
</div>

CSS

.main{ height:500px; border:1px red solid;position:relative}
.box{width:40px; height:40px; background:transparent; }

/* for centering */
img{width:100px}
.box { display: inline-block; width:100px }
.main{ text-align: center; }
.main:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; }