CODEWITHSUNDEEP
csswordpressicons
Charles Duporge
Charles Duporge

Reputation: 672

Icon with text on text block

I'm new on WP and I need some advice on a task, I want something like this : enter image description here

So, in my block text I need an icon and a text associated to it (like in the image), but I don't know how to align them since currently I have this :

enter image description here

Here is my code : enter image description here

Upvotes: 0

Views: 782

Answers (2)

AVD
AVD

Reputation: 68

You might try this: img style="vertical-align:middle" in the img tag.

Upvotes: 0

ptts
ptts

Reputation: 1053

Your HTML structure should look like this:

<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">[email protected]</span>
</div>

The Css is in the link, keep in mind this is a single icon module using flexbox, I find this very practical, especially for mobile design.

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

I have added a horizontal and verticl aligment layout, they both look grand:-)

Upvotes: 1

Related Questions