html - 如何让图像与文本标签对齐？

Question

我正在尝试在 bootstrap 3 中创建它:

但是，现在我得到了这个:

我的图片没有与 h4 标签完美对齐，我的 p 标签也不会像第一张图片那样排成一行。我正在使用 bootstrap 3，所以我正在使用它的一切，我想知道是否有人可以帮助我实现这种外观。到目前为止，我有:

.col-content {
  overflow: hidden;
  padding: 0 15px;
}

.col-content p {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
}

.col-icon {
  font-size: 48px;
  float: left;
  padding: 20px 10px;
  text-align: left;
}

<div class="row">
  <div class="col-md-4">
    <div class="col-icon">
      <i class="fa fa-lightbulb-o"></i>
    </div>
    <div class="col-content">
      <h4>Web <span class="highlight">Development</span></h4>
      <p>Praesent sodales, quam vitae gravida interdum, ex mi bibendum enim, sit amet tristique mi quam vel odio. Donec non nunc condimentum, hendrerit elit sed, condimentum magna. Suspendisse imperdiet purus vel ornare cursus.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="col-icon">
      <i class="fa fa-lightbulb-o"></i>
    </div>
    <div class="col-content">
      <h4>Internet <span class="highlight">Marketing</span></h4>
      <p>Curabitur et diam elementum, mollis tortor a, malesuada turpis. Vivamus gravida, justo et molestie sollicitudin, erat lorem tempus eros, vel laoreet nibh urna ac nunc, vestibulum neque vitae pellentesque efficitur.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="col-icon">
      <i class="fa fa-lightbulb-o"></i>
    </div>
    <div class="col-content">
      <h4>Client <span class="highlight">Support</span></h4>
      <p>Sed porta erat vel ipsum maximus, eget maximus est maximus. Maecenas at venenatis nibh, sit amet suscipit odio. In feugiat vehicula dui. In felis enim, maximus a dolor semper efficitur elit euismod magna quis commodo.</p>
    </div>
  </div>
</div>

我只是想让它看起来像使用 bootstrap 3 的第一张图片。

Answer 1

从 .col-content p 中删除 text-align: center 以避免段落中的文本居中并更改 padding: 20px 10px; 到 padding: 0 10px 20px 10px; 在 .col-icon 中将图标移动到容器的顶部:

https://codepen.io/anon/pen/wpaebo