將圖像和文本放在同一行中的跨度

Question

有一些麻煩。

我跟着這個：CSS align images and text on same line和其他一些來源，而不是很多運氣。

有了上面的鏈接，它建議添加float:left;clear:left;作爲解決方案。它部分工作，但它將圖標推到了最遠的角落，而不是保持在中心位置。 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

的最終目標是與其他文字它的垂直和水平對齊。

所有提示讚賞！

Answer 1

試試這個：

.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>

Answer 2

CSS：display: inline-block或display: inline

Answer 3

https://jsfiddle.net/o58vsw68/1/

使用以下CSS和HTML中插入afet您的圖像的空間：

.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; 
    text-align: center; 
} 

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