Travis Travis - 2 months ago 6
CSS Question

Placing image and text on same line in a span

Having some trouble with this.

I followed this: CSS align images and text on same line and a few other sources and not a whole lot of luck.

With the link above, it suggests adding

float:left;clear:left;
as a solution. It partially works, but it pushes the icons to the far corner instead of keeping it to the center.
HTML

<div class="parent">
<span class="child"><img class="clipart" src="http://waplasticsurgery.com/wp-content/uploads/2016/10/test_phone.png">(XXX)-XXX-XXXX</span>
<div id="space"></div>
<span class="child">Email Inquiry</span>
</div>


CSS

.parent{
width:100%;
height:76px;
border:1px solid grey;
border-radius:12px;
display: -ms-flexbox;
display:flexbox;
display:flex;
text-align:center;
align-items:center;
justify-content:center;
}
#space{
width:10px;
display:inline-block;
}
.child{
font-family: 'Lato', sans-serif;
font-size:14px;
font-weight:bold;
width:200px;
height:45px;
line-height:45px;
display:inline-block;
vertical-align:middle;
border:2px solid #8CAAD2;
border-radius:10px;
}

.clipart{
vertical-align:middle;
display:inline-block;
float:left;
clear:left;
}


jsfiddle

The end goal is to have it vertical and horizontal aligned with the other text.

All tips appreciated!

Answer

Try this:

.parent{
  width:100%;
  height:76px;
  border:1px solid grey;
  border-radius:12px;
  display: -ms-flexbox;
  display:flexbox;
  display:flex;
  text-align:center;
  align-items:center;
  justify-content:center;
}
#space{
  width:10px;
  display:inline-block;
}
.child{
    font-family: 'Lato', sans-serif;
    font-size:14px;
    font-weight:bold;
  width:200px;
  height:45px;
  line-height:45px;
  display:inline-block;
  vertical-align:middle;
  border:2px solid #8CAAD2;
  border-radius:10px;
}

.clipart{
    vertical-align:middle;
    display:inline-block;
    clear:left;
}
<div class="parent">
<span class="child"><img class="clipart" src="http://i.imgur.com/Cc37OOU.png">(XXX)-XXX-XXXX</span>
<div id="space"></div>
<span class="child"><img class="clipart" src="http://i.imgur.com/IsuHm7W.png">Email Inquiry</span>
</div>