I am trying to achieve a design where I have an image and a div containing vertically centered text. The div should have padding around it along with a border, similar to this example: https://i.sstatic.net/VlgIY.png
Currently, this is the closest I have come to replicating the desired look: http://jsfiddle.net/cym5jhzL/
<div id="table-header-phone">
<div id="image-container" class="cell-header-image">
<img src="http://i.imgur.com/Y3dNk4q.jpg" />
</div>
<div id="tagline-phone" class="cell-phone">
<div class="tagline">Text can be added here, this needs to stay centered</div>
<div class="phone-number">(800) 555-5555</div>
</div>
</div>
#table-header-phone {
display: table;
width: 940px;
background: navy;
padding: 20px;
}
#tagline-phone {
background: #DD1D1D;
color: #FFF;
font-size: 20px;
text-align: center;
}
.cell-header-image {
display: table-cell;
width: 630px;
position:relative;
}
.cell-phone {
display: table-cell;
vertical-align:middle;
}