Html 使图标和标题文本与CSS对齐

Html 使图标和标题文本与CSS对齐,html,css,alignment,Html,Css,Alignment,我有一个问题,对齐图标和文字,使他们停留在同一高度 我强调了一些元素,以便于查看: 我想使图标和标题对齐,如红线所示: 资料来源: <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 text-center"> <div class="service-box"><img>

我有一个问题,对齐图标和文字,使他们停留在同一高度

我强调了一些元素,以便于查看:

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

资料来源:

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

标题2

lorem ipsum door sat amet concetetur adipsite elite sed do

标题3

lorem ipsum dolor坐在同一条船上 坐在这里向精英致敬


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

.service box img{
浮动:左;
右边距:20px;
最小高度:80px;
最小宽度:80px;
背景:浅蓝色;
}
.服务箱:之后{
内容:'';
显示:块;
明确:两者皆有;
}

标题2

lorem ipsum door sat amet concetetur adipsite elite sed do

标题3

lorem ipsum door sit amet concertetur adipise elit sed dolorem ipsum door sit amet concertetur adipise elit sed do


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

.service box img{
浮动:左;
右边距:20px;
最小高度:80px;
最小宽度:80px;
背景:浅蓝色;
}
.服务箱:之后{
内容:'';
显示:块;
明确:两者皆有;
}

标题2

lorem ipsum door sat amet concetetur adipsite elite sed do

标题3

lorem ipsum door sit amet concertetur adipise elit sed dolorem ipsum door sit amet concertetur adipise elit sed do


试试这个:谢谢添加class=“media heading”成功!请注意,Bootstrap的css将填充应用于h3和其他元素,如p-您可能希望克服这一点,并在样式ruleRef中应用填充顶部:0:试试这个:谢谢添加class=“media heading”成功!请注意,Bootstrap的css将填充应用于h3和其他元素(如p)-您可能希望克服这一点,并在样式ruleRef:Thank中应用填充top:0,谢谢,但不起作用,文本仍在图标下方,但不起作用,文本仍在图标下方