将图像和文本放在跨度的同一行答案

【问题标题】：Placing image and text on same line in a span将图像和文本放在跨度的同一行
【发布时间】：2017-02-10 21:56:13
【问题描述】：

遇到了一些麻烦。

我关注了这个：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

最终目标是让它与其他文本垂直和水平对齐。

感谢所有提示！

【问题讨论】：

标签： html css

【解决方案1】：

css：display: inline-block 或 display: inline

【讨论】：

如果你看，内容是float:left;

【解决方案2】：

试试这个：

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

【讨论】：

嗯。对我来说，它是如何使用该代码出现在我的网站上的：image.prntscr.com/image/1b7395bf44894919b3044881c1f2aa70.png
@Travis 试试添加这个：.row .col img { margin-bottom: 4px; max-width: 100%; width: auto; height: auto; }
非常感谢。我在想还有其他原因导致了这个问题
@Travis 没问题，很高兴帮助 :)

【解决方案3】：

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

使用以下 CSS 并在 HTML 中的图片后面插入一个空格：

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

【讨论】：