与文本的象在文本块

时间:2017-01-02 16:43:51

标签: css wordpress icons

我是WP的新手,我需要一些关于任务的建议,我想要这样的事情:enter image description here

所以,在我的块文本中,我需要一个图标和一个与之关联的文本(如图中所示),但我不知道如何对齐它们,因为目前我有这个:

enter image description here

这是我的代码: enter image description here

2 个答案:

答案 0 :(得分:1)

您的HTML结构应如下所示:

<div class='wrap'>
<img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/699049-icon-6-mail-envelope-closed-128.png" height=70 width=70 alt="mailIcon">
<span class="address">Mymail@provider.com</span>
</div>

Css在链接中,请记住这是使用flexbox的单个图标模块,我发现这非常实用,特别是对于移动设计。

http://codepen.io/damianocel/pen/pRzBMp

我添加了一个水平和垂直对齐布局,它们看起来都很隆重: - )

答案 1 :(得分:0)

您可以在img标记中尝试:img style="vertical-align:middle"