0

So I am making a website and at the bottom of a page it has a slogan. Which in in a div with custom css (Including top and bottom borders).

However, the text is centered with css but is isn't centered vertically in between the two borders.

Here is my code. 

#foot {
  border-bottom: 6px solid black;
  background-color: #9C0002;
  font-family: 'Balthazar', serif;
  color: black;
  text-align: center;
  border-top: 6px solid black;
  vertical-align: middle;
}
<div class="row" id="foot">
  <div class="col-lg-12">
    <h2>UNLOCKING  YOUR  POTENTIAL</h2>
  </div>
</div>

Any help would be really appreciated.

dippas
  • 58,591
  • 15
  • 114
  • 126
Peter S
  • 5
  • 5
  • Just to let you know the {vertical-align:middle;} was added later to try and fix it. – Peter S Sep 04 '16 at 22:25
  • @Paulie_D I would agree with on this being a dupe, but this is more a specific issue regarding Twitter Bootstrap than a general question on how to vertical center a text in a div – dippas Sep 04 '16 at 22:34

1 Answers1

2

That's because in Twitter bootstrap, H1 to H3, has margin-top:20px and margin-bottom:10px

You need to override those values in your Custom CSS file.

#foot {
  border-bottom: 6px solid black;
  background-color: #9C0002;
  font-family: 'Balthazar', serif;
  color: black;
  text-align: center;
  border-top: 6px solid black
}
#foot h2 {
  margin: 10px /* choose whaterver you want */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row" id="foot">
    <div class="col-lg-12">
      <h2>UNLOCKING  YOUR  POTENTIAL</h2>
    </div>
  </div>
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126