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

Question

我在div中有一个图像和标题标记， 如何将它们与心爱的图像对齐。

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

像这样的当前输出

但我想要像这样

Answer 1

更好的解决方案是

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在div内联块中显示两个元素，并垂直对齐标题文本。

Answer 2

如果将类分配给元素，则可以将以下CSS应用于它们。重要的是子元素是内嵌块，它们可以在容器中水平和垂直居中。他们只需要占用内容所需的空间。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个

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

Answer 4

这项工作很好：

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

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

    </div>
</div>

你的CSS文件中的

：

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

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

Answer 5

全部谢谢， 使用您的评论和答案找到解决方案， 我删除了pull-left类并添加了心爱的CSS行

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