Top and Bottom border in CSS doesn't align text vertically inside a <div> tag

debugcn Published at Dev

Peter S

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

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.