如何使图片与文字标记

Question

大家好我想在bootstrap 3中创建这个：

但是现在我得到了这个：

我的图片未与h4标记完美对齐，我的p标记不会作为第一张图片保留在一行中，我使用bootstrap 3所以即时使用它一切，并想知道是否有人可以帮助我实现这种外观，到目前为止我有：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我只是想让它看起来像带有bootstrap 3的第一张图片，所以对此事的任何帮助都会很棒，谢谢

Answer 1

从text-align: center移除.col-content p以避免段落中的文本居中，并将padding: 20px 10px;更改为padding: 0 10px 20px 10px;中的.col-icon以将图标移至他们的容器顶部：

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

Answer 2

有关排队使用display:inline-flex;align-item: flex-start;并从text-align: center;代码中删除p

Answer 3

在制作图标top

时使用left和position:relative的组合

position: relative;
top: -11px;
left: 8px;

.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;
  text-align: left;
  position: relative;
  top: -11px;
  left: 8px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

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