How to center alignment of title and image contained in div tag

Question

I have one image and title tag in a div, How can I align them as my favorite 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>

Run codeHide result

Display both elements in a linear div block and vertically align the title text.

Answer 2

, CSS. , , , . , .

.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>

Hide result

Answer 3

try it

  <div class="clearfix text-center">
    <img src="https://unsplash.it/400/180" alt="Icon" class="pull-left">
<h4>Refinancing</h4>
  </div>

Answer 4

this work is good:

<div class="clearfix">
    <div class="block">

          <img src="your_icon.png" class="pull-left">
          <h4>Refinancing</h4>

    </div>
</div>

in your CSS file:

.clearfix{
/*your code ...*/
position:relative;
}

.block{
display:inline-block;
position:absolute;
left:50%;
transform:TranslateX(-50%);
}

Answer 5

Thanks everyone, Find a solution using your comment and answers, I removed the class pull-leftand added my favorite CSS line

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

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