Vertical Aligning The Text In A Container

I am trying to align span elements which are adjacent to a floating element. Here is the fiddle I am okay to change the HTML. Some considerations: (Added after seeing below answer

Solution 1:

I would love to go with the display: table-cell; solution but if it's just one line than you can use line-height here. (Just not to complicate the process using display: table-cell; as there are certain limitations such as you cannot use margin and stuff)

.heading {
    background-color: tomato;
    line-height: 40px;
}    

.button {
    float: right;
    padding: 010px;
    background-color: firebrick;
}

Demo (line-height solution)

So basically what am doing is getting rid of your custom padding for the button and using a line-height instead. If you think you can have more than one line, than making both the sections as display: table-cell; will make much more sense.

---

As you commented a case where you have different font-size which doesn't make much sense to me, so a solution for that is to use display: table-cell; and tweak your markup a bit

Demo 2 (display: table-cell; solution)

<divclass="heading"><div><span> some icon here</span><span>some text here</span></div><div><divclass="button">Go</div></div></div>

.heading {
    background-color: tomato;
    line-height: 40px;
}

.heading > div {
    display: table-cell;
    vertical-align: middle;
}

.heading > div:first-child {
    width: 100%;
}

.heading span {
    display: inline-block;
    vertical-align: top;
}

.heading span:first-child {
    font-size: 30px;
}

.button {
    padding: 0 10px;
    background-color: firebrick;
}

Solution 2:

Add this in to your css:

.headingspan {
  line-height: 34px;
}

Solution 3:

I think you try to display: table-cell property

as like this

.heading {
    background-color: tomato;
    display: table;
    width:100%;
}
/* clear fix */.heading::after {
    content:"";
    display: block;
    clear: both;
}
.heading > * {
    display: table-cell;
    vertical-align: middle;
    color: beige;
}
.button {
    float: right;
    padding: 10px;
    background-color: firebrick;
}
/* my attempt to align */.heading::before {
    content:"";
    height: 100%;
    width: 0px;
}

<divclass="heading"><span> some icon here</span><span>some text here</span><divclass="button">Go</div></div>

Solution 4:

Try

position: relative;
top: 50%;
transform: translateY(-50%);

Solution 5:

I would suggest using a padding and make sure the height of the button is set.

.heading.mytext {
  height: 20px;
  float: left;

  padding-bottom: 10px;
  padding-top: 10px;
}


.button {
  float: right;
  padding: 10px;
  height: 20px;
  background-color: firebrick;

}

with html

<divclass="heading"><divclass="mytext"><span> some icon here</span><span>some text here</span></div><divclass="button">Go</div></div>

See: http://jsfiddle.net/w7vngc43/20/