如何居中对齐div标签中包含的标题和图像

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> 

Answer 3

Try This

  <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 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 All, Find a solution using yours comment and answers, I removed pull-left class and added beloved 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>