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

Question

我正在尝试在引导程序 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>

我只是想让它看起来像引导程序 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

Answer 2

排列使用display:inline-flex;align-item: flex-start; 并删除text-align: center; 来自p标签

Answer 3

在制作图标position:relative时使用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>