How to center-align heading and image contained in a div tag

Question

I have one image and heading tag in a div, How can I align them like beloved images.

<div class="clearfix">
    <img src="http://localhost/chifley-acf/wp-content/uploads/2017/03/icon-01.png" alt="Icon" class="pull-left">
    <h4>Refinancing</h4>
</div>

Current output like this

But I want Like This

Answer 1

A better solution for this would be

.wrapper {
text-align: center;
}
.heading, img {
display: inline-block;
}
.heading {
vertical-align: top;
}

<div class="clearfix wrapper">
    <img src="http://placehold.it/80x60/0fa" alt="Icon" class="pull-left">
    <h4 class="heading">Refinancing</h4>
</div>

Make the display of both the elements in the div inline-block and vertically align the heading text.

Answer 2

If you assign classes to the element, you can apply the following CSS to them. The essential thing is that the child elements are inline-blocks, which can be centered in their container both horizontally and vertically. Hoizontally they only take as much space as their contents need.

.x {
text-align: center;
}
.y {
display: inline-block;
}
.x img, .y {
vertical-align: middle;
}

<div class="clearfix x">
    <img src="http://placehold.it/80x60/0fa" alt="Icon" class="pull-left">
    <h4 class="y">Refinancing</h4>
</div>