CODEWITHSUNDEEP
htmlcssalignmentcentering
Ovidiu G
Ovidiu G

Reputation: 1273

Centering icon with text

I'm trying to center one icon and some text and it seems that I can't get it right. I know this might seem pretty easy but I just started and I can't figure a way to do this. This is the code : 

<div class="row">
    <div class="col-sm-4">
        <div class="features-icon">
            <div class="outter-circle">
                <div class="inner-circle">
                    <i class="fa fa-rocket"></i>
                </div>
            </div>
        </div>
        <div class="features-text">
            <span id="features-title"><h3>High Quality Services</h3></span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris dui, laoreet vitae elementum a, feugiat nec tortor. Sed quam neque, ultricies nec est id, accumsan porttitor tellus.</p>
            <hr>
        </div>
    </div>
</div>

I tried with :

.features-text {
    width: 100%;
}
.features-icon {
    width: 50%;
    margin: 0 auto;
}

But it's not centered perfectly in the middle and I also have issues when I resize the browser window.

Maybe I'm not clear so I uploaded some pictures.

How it is without any styling.

http://tinypic.com/r/k99awh/8

And the second image with the styling I applied.

http://tinypic.com/r/2607jac/8

As you can see it's not centred perfectly... Any help please ? :)

Upvotes: 1

Views: 85

Answers (1)

smoggers
smoggers

Reputation: 3192

Use text-align: center;

.row {
  text-align: center;
}
<div class="row">
  <div class="features-icon">
    <i class="fa fa-rocket">YOUR ICON</i>
  </div>
  <div class="features-text">
    <span id="features-title"><h3>High Quality Services</h3></span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris
       dui, laoreet vitae elementum a, feugiat nec tortor. Sed quam neque,
       ultricies nec est id, accumsan porttitor tellus.
    </p>
  </div>
</div>

jsfiddle

Upvotes: 1

Related Questions