将图像和文本放在跨度中的同一行上

debugcn 发表于 Dev

特拉维斯

遇到一些麻烦。

我遵循了这一点：CSS在同一行和其他一些来源上对齐图像和文本，但运气并不好。

通过上面的链接，它建议添加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

最终目标是使它在垂直和水平方向上与其他文本对齐。

所有提示表示赞赏！

梅尔基泽德克

试试这个：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。