CSS - Vertically align text with line on text - html

Question

In have a js-fiddel here - https://jsfiddle.net/zhfs7hxq/
Very simple I have text within a div with text within a span within that div.
I need to vertically center the the span of text against the larger text within the div.
vertical-align: middle; moves it slightly but doesn't center it.
*{
font-family: sans-serif;
}
.name{
background: yellow;
font-size: 40px;
font-weight: bold;
}
.name-inner{
display: inline;
font-size: 20px;
vertical-align: middle;
}

Answer 1

In your code is vertical aligned by the line-height, that's how it works. If you need to center perfectly you can position absolute the element. I modify your fiddle to achieve it:
https://jsfiddle.net/zhfs7hxq/1/
In the first yellow block targets your code.
My modifications is in the second yellow block:
.name{
margin: 10px;
position:relative;
background: yellow;
font-size: 40px;
font-weight: bold;
}
.name.other .name-inner{
position: absolute;
display:inline-block;
font-size: 20px;
top: 50%;
transform: translateY(-50%);
}
Good luck

Answer 2

If you can use flex box, try this JSFIDDLE: https://jsfiddle.net/zhfs7hxq/2/
Note that vertical-align works only on table-cell and inline-level elements.
Flex box solution
Add this to .name to set its display to flex:
.name {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
}
And to .name-inner add the following to align vertically centered:
.name-inner {
-webkit-align-self: center;
-moz-align-self: center;
-ms-align-self: center;
align-self: center;
}

Answer 3

There's a line-height for your code. Try making the line-heights identical:
line-height: 45px;
Snippet
*{
font-family: sans-serif;
}
.name{
background: yellow;
font-size: 40px;
font-weight: bold;
line-height: 40px;
}
.name-inner{
font-size: 20px;
vertical-align: middle;
line-height: 45px;
}
<div class="name">Heading one <span class="name-inner">Heading insert</span></div>