使图标和标题文本对齐CSS

Question

我在调整图标和文字时遇到问题，使它们保持相同的高度

我强调了一些使它们易于查看的元素：

我想让图标和标题对齐，如红线所示：

资源：

    <div class="container">
    <div class="row">

        <div class="col-lg-6 col-md-6 text-center">
            <div class="service-box"><img>
                <div class="content"><h3 >title</h3>
                    <p class="text-muted">content goes here lorem ipsum bla bla </p></div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 text-center">
            <div class="service-box"><img src="/static/media/icon.svg">
                <div class="content"  ><h3>title 2</h3>
                    <p class="text-muted">lorem ipsum dolor sit amet consectetur adipiscing elit sed do</p></div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 text-center">
            <div class="service-box"><img src="/static/media/icon.svg">
                <div class="content"><h3>title 3</h3>
                    <p class="text-muted">lorem ipsum dolor sit amet consectetur adipiscing elit sed dolorem ipsum dolor
                        sit amet consectetur adipiscing elit sed do</p></div>
            </div>
        </div>
    </div>
</div>

Answer 1

有很多方法可以做到这一点。一种是向左浮动图像，并在服务框元素之后添加一个clear: both;。 （我在图像标签上添加了一些额外的样式，因此它将在演示中显示。背景颜色，最小宽度，最小高度当然不是必需的。）

.service-box img {
    float: left;
    margin-right: 20px;
    min-height: 80px;
    min-width: 80px;
    background: lightblue;
}
.service-box:after{
    content:'';
    display:block;
    clear:both;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 text-center">
            <div class="service-box">
                <img>
                <div class="content">
                  <h3 >title</h3>
                  <p class="text-muted">content goes here lorem ipsum bla bla </p>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 text-center">
            <div class="service-box">
                <img src="/static/media/icon.svg">
                <div class="content">
                  <h3>title 2</h3>
                  <p class="text-muted">lorem ipsum dolor sit amet consectetur adipiscing elit sed do</p>
               </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 text-center">
            <div class="service-box">
                <img src="/static/media/icon.svg">
                <div class="content">
                  <h3>title 3</h3>
                  <p class="text-muted">lorem ipsum dolor sit amet consectetur adipiscing elit sed dolorem ipsum dolor sit amet consectetur adipiscing elit sed do</p>
                </div>
            </div>
        </div>
    </div>
</div>