CODEWITHSUNDEEP
htmlcssfont-awesome
user61398
user61398

Reputation: 29

Trying to line up text under Font Awesome icon

I'm currently using 2 Font Awesome icons. The problem is that I want to add text under each one that align with these icons. The problem is that the text is centered on the page but not under the corresponding icons.

Code:

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="brand-heading">Title</h1>
            <p class="intro-text">description</p>
            <a href="#about" class="btn btn-circle page-scroll btn-lg">
                <i class="fa fa-angle-double-down animated"></i>
            </a>
            <a href="#contact" class="btn btn-circle page-scroll">
                <i class="fa fa-angle-double-up animated"></i>
            </a>
        </div>
    </div>About   Contact
</div>

Upvotes: 1

Views: 6725

Answers (3)

plushyObject
plushyObject

Reputation: 1131

I think this is what you want to do. Here is the fiddle:

http://jsfiddle.net/plushyObject/02s7wnm8/

            <div class="col-md-8 col-md-offset-2 text-center outline">
                <h1 class="brand-heading">Title</h1>
                <p class="intro-text">description</p>
                <div class="col-sm-4 outline">
                    <a href="#about" class="btn btn-circle page-scroll btn-lg outline">
                        <i class="fa fa-angle-double-down fa-fw"></i>
                    </a>
                    <p class="outline">
                        Text is centered by 'text-center' class inherited from first 
                        column.
                    </p>
                </div>
            </div>

Upvotes: 1

Blue
Blue

Reputation: 41

If you text-align the parent element, it will be inherited by the picture. 

CSS

.container {
    text-align: center;
}

Upvotes: 1

Ian Hazzard
Ian Hazzard

Reputation: 7771

Line it up using an HTML <table>, and style it with CSS. That way it will stay on top of the icons correctly.

http://jsfiddle.net/vd6smL75/

Upvotes: 0

Related Questions