如何使图像与文本标签对齐？

Question

我正在尝试在Bootstrap 3中创建以下内容：

但是，我现在得到的效果是这样的：

我的图片与

标签没有对齐，而我的

标签也不能像第一张图片一样保持在同一行。我正在使用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使它看起来像第一张图片。

- RonTheOld

---

你的图标有一个 padding-top，可能是问题所在。 - Dirk

Answer 1

从 .col-content p 中删除 text-align: center，以避免段落中的文本居中，并且在 .col-icon 中将 padding: 20px 10px; 更改为 padding: 0 10px 20px 10px;，以将图标移到其容器的顶部： https://codepen.io/anon/pen/wpaebo

- Johannes

Answer 2

要排列一行，请使用display:inline-flex;align-item: flex-start;，并从p标签中删除text-align:center;

- satyajit rout

Answer 3

在将图标的 position 设为 relative 的同时，使用 top 和 left 的组合。

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>

- Gerardo BLANCO