使图标和标题文本对齐CSS

时间:2017-12-19 04:15:07

标签: html css alignment

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

我强调了一些让他们很容易看到的元素:

image

我想让图标和标题对齐,如红线所示:

like this

源:

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

1 个答案:

答案 0 :(得分:2)

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

&#13;
&#13;
.service-box img {
    float: left;
    margin-right: 20px;
    min-height: 80px;
    min-width: 80px;
    background: lightblue;
}
.service-box:after{
    content:'';
    display:block;
    clear:both;
}
&#13;
<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>
&#13;
&#13;
&#13;