0

Here is my jsFiddle with full code example.

I am trying to achieve the following to no avail:

  • I want the glyphicon-globe to appear centered and above the "Community" label (<h1>), and I want all three elements (the glyphicon, the <h1> heading and <h3> subheading) to be horizontally-centered in the middle of the screen
  • I want the "Community" label to appear with the correct font (see what happens when you remove the glyphicon...)

I have a feeling that the glyphicon is causing both problems:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1><span class="glyphicon glyphicon-globe"/>Community</h1>
            <h3>A free online community to all new fizz-comers.</h3>
        </div>
    </div>
</div>

Perhaps this is malformed somehow or causing weird CSS rules to fire. Any ideas?

smeeb
  • 27,777
  • 57
  • 250
  • 447

1 Answers1

1

span tags shouldn't be self-closing. Here's a better explanation.

This updated example should style the heading and icon the way you want. By center aligning the text in the H1, the span inside it will also center (if set to display: block). The H1 will take the full width of the container element - setting it to display:inline-block is to make this example look better. 

<h1 style="text-align: center; display: inline-block;"><span class="glyphicon glyphicon-globe" style="display: block"></span>Community</h1>
Community
  • 1
  • 1
UrbanDude
  • 436
  • 2
  • 5
  • Thanks @Urban Dude (+1) - however in your example, the `

    ` heading and the `

    ` subheading are still left-aligned; I'm trying to get all three (glyphicon, heading & subheading) horizontally-centered in the middle of the screen. Any ideas? Thanks again!

     – smeeb Nov 06 '14 at 10:11