垂直排列内联元素 - 将图像与文本对齐在同一行

Question

无法垂直排列内联元素 - 我希望 email 图像与同一行上的文本对齐，并且不会对同级元素的流动造成不利影响：

JSFiddle

HTML：

<p><span class="purple">phone:</span> 123.123.1234</p>
<p><span class="green">email:</span> <img src="http://www.illuminart.com/tests/img/email.png" alt="" style="width:172px; height:13px" /></p>
<p><span class="purple">phone:</span> 123.123.1234</p>

CSS：

body {
    font-family: Verdana, Tahoma, Arial;
    font-size: 10pt;
}
p {    
    line-height: 15px;
}
span {}
img {}

更新：将 img 设置为 vertical-align:middle 并将行高从“px”更改为“em”似乎效果更好。

CSS：

body {
    font-family: Verdana, Tahoma, Arial;
    font-size: 10pt;
}
p {    
    line-height: 1.4em;
}
span {}
img { 
    vertical-align: middle;
}

Answer 1

看看这个： http://jsfiddle.net/c8C8C/1/ 。 你想要这个吗？

我只是在你的 img 标签样式属性中添加了vertical-align:middle 。

Answer 2

将表情符号与文本垂直对齐

垂直对齐对我不起作用。

对我有用的是：

<h3 class="title"><span class="emoji">👉 </span> Some text here</h3>

• 在 HTML 中：将表情符号包裹在一个跨度中

• 在 CSS 中：

   // on parent (ie h3 or p) display: inline-flex // on emoji wrapper span align-self: center; margin-top: -10px; // adjust this

您可能必须根据字体、行高等调整margin-top值。

希望能帮助到你。

 .list-title { display: inline-flex; }.emoji { align-self: center; margin-top: -10px; // adjust margin-top to your needs }

 <h3 class="list-title"><span class="emoji"> </span> Some text here</h3> <br> <p class="list-title"><span class="emoji"> </span> Some text here</p>