Framework basics: Not centered glyphicons

Question

Hi!! my glyphicons won't centre and i dont know why

here is my code..

<!DOCTYPE html>
<html>
  <head>
    <title>Wildcare Trust</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
    <link href="css/my-styles.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- Navbar -->
      <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">

          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand text-muted" href="#">WildCare</a>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#">Home</a></li>
              <li class="dropdown">
                <a data-toggle="dropdown" data-target="#">WildCare Teens<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Membership Pricing</a></li>
                  <li><a href="#">About of teen membership</a></li>
                  <li class="divider"><li>
                  <li><a href="#">Buy a teen membership</a></li>
                </ul>
              </li>
              <li><a href="#">WildCare Children</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
        </div>
      </div>
    <!-- End nanbar -->
    <div class="container">
      <div class="jumbotron">
        <h1>WildCare Trust</h1>
        <p class="lead">WildCare Trust looks after endangered animals. Help us by signing up and donating so we can help save endangered animals lives!</p>
        <p class="btn-group">
          <a href="#" class="btn btn-success btn-lg">Join Us Now!</a>
          <a href="#" class="btn btn-default btn-lg hidden-xs">Donate Now!</a>
        </p>
      </div>

      <div class="row">
        <div class="col-sm-4">
          <b class="glyphicon glyphicon-book"></b>
          <h2>General information</h2>
          <p>The WildCare Trust was set up in 2005 with the aim of saving animals from extinction. It is a charity and relies on its members for financial support to continue its... <br> <a href="#" class="btn btn-info">More Info</a></P>
        </div>

        <div class="col-sm-4">
          <b class="glyphicon glyphicon-tags"></b>
          <h2>Animal adoption scheme</h2>
          <p>Members may choose any animal in the database and adopt it by completing an application form and paying a fee. In... <br> <a href="#" class="btn btn-info">More Info</a></P>
        </div>

        <div class="col-sm-4">
          <b class="glyphicon glyphicon-user"></b>
          <h2>WildCare Teens</h2>
          <p>Members will receive a Welcome Pack and will be able to download a database of information about endangered species. The pack will include a membership card... <br> <a href="#" class="btn btn-info">More Info</a></P>
        </div>
      </div>

      <hr>
      <div class="row">
        <div class="col-sm-6 hidden-xs">
          <h2>Sponsor an animal!</h2>
          <p>Members may choose to sponsor any animal, for a year, that is in the database by completing an application form and paying a small fee to sponsor their chosen animal. Once a Member is...        <a href="#" class="btn btn-info">More Info</a> </p>

          <div class="row">
            <div class="col-sm-6 col-md-push-6">
              <img src="fonts/panda.jpg" class="img-rounded img-responsive">
            </div>
            <div class="col-sm-6 col-md-pull-6">
              <p>You Could sponsor an animal for just $20 a month!</p>
              <a href="#">Go and sponsor an animal now!</a>
            </div>
          </div>

        </div>

        <div class="col-sm-6">
          <h2>WildCare Children Memberships!</h2>
          <p>WildCare Children Memberships come in two forms. 1) WildCare Teen Membership 2) Wildcare Children Membership. The Teenager membership is the exact same price as the Children....        <a href="#" class="btn btn-info">More Info</a> </p>
        </div>
      </div>
        <p>&copy; 2013 WildCare Trust</p>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

and

/* Layout
===================================== */

body {
    padding-top: 70px;
}

.container {
    max-width: 1000px;
}

/* Jumbotron 
===================================== */

.jumbotron {
    text-align: center;
}

/* Glyphicon
===================================== */

.glyphicon {
    font-size: 3em;
    display: block;
    text-align: center;
    color: #3a87ad;
}

Answer 1 · 2013-12-12T01:54:19Z

December 12, 2013 1:54am

.glyphicon {
    display: block;
    text-align: center;
}

> my glyphicons won't centre

Don't use text-align: center with display: block it's for centering inline content. For centering block content use margin: auto.

see demo here: http://codepen.io/jamesbarnett/pen/sjxbC

Answer 2 · 2013-12-12T01:23:35Z

December 12, 2013 1:23am

i am not sure too but when i debugged it. i found it worked when i have added this to css

.glyphicon:empty{
    width: 100%;
}

http://jsbin.com/icebakiy/1/edit?css,output

Welcome to the Treehouse Community

Looking to learn something new?

Ben Bastow

Ben Bastow

Framework basics: Not centered glyphicons

2 Answers

James Barnett

James Barnett

maithreya reddy addula

maithreya reddy addula

maithreya reddy addula

maithreya reddy addula