bonaca bonaca - 1 month ago 7
HTML Question

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

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 Source

Use margin-top. Ex : margin-top: -13px;

Sample