CODEWITHSUNDEEP
htmlcssalignment
Diego Vallejo
Diego Vallejo

Reputation: 55

make icons and title text align CSS

I have a problem aligning the icons and text to make them stay in the same height

I highlighted some of the elements to make them easy to see :

image

I want to make the icon and the title align like the red line shows:

like this

source:

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

Upvotes: 1

Views: 1434

Answers (1)

D.B.
D.B.

Reputation: 1782

There are many ways to do this. One is to float the image left, and add a clear: both; after the service-box element. (I added a little extra styles on the image tag so it will show in the demo. The background-color, min-width, min-height are of course not required.)

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

Upvotes: 3

Related Questions