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中插入图像空间：

diff --git a/configure.ac b/configure.ac
index 81dece0..ed38bf6 100644
--- a/configure.ac
+++ b/configure.ac
@@ -346,6 +346,7 @@ CFLAGS="-Werror -Wall"
AC_COMPILE_IFELSE([
  AC_LANG_SOURCE([
    #include <grp.h>
+    #include <unistd.h>
    int main(int argc, char**argv)
    {
        int groups[[4]];

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

3 个答案: