0

I could use a hand vertically aligning text within a Bootstrap button.

If I use the class the text is vertically aligned like I want, but if I use the class the text is top-aligned and nothing I do seems to change it. Any ideas?

Screenshot of the buttons:

Screenshot of the buttons

/* added by editor for demo purpose */
button {
  min-height: 80vh;
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="d-flex justify-content-between px-1 py-1 vh-100 align-middle">
  <a href="#link" class="btn btn-outline-primary btn-lg w-50 align-middle" type="submit">
    <h1>Header 1</h1>
    <p>This is text.</p>
  </a>
  <button class="btn btn-outline-primary btn-lg w-50 align-middle" type="submit">
    <h1>Header 2</h1>
    <p>This is more text.</p>
  </button>
</div>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
Foaric
  • 1
  • 1

1 Answers1

1

The issue is that an <a>nchor remains an inline-element in Bootstrap. As such it has a line-height to which it centers. You can solve this with flexbox by adding d-flex flex-column justify-content-center

/* added by editor for demo purpose */
button {
  min-height: 80vh;
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="d-flex justify-content-between px-1 py-1 vh-100 align-middle">
  <a href="#link" class="d-flex flex-column justify-content-center btn btn-outline-primary btn-lg w-50 align-middle" type="submit">
    <h1>Header 1</h1>
    <p>This is text.</p>
  </a>
  <button class="btn btn-outline-primary btn-lg w-50 align-middle" type="submit">
    <h1>Header 2</h1>
    <p>This is more text.</p>
  </button>
</div>
tacoshy
  • 10,642
  • 5
  • 17
  • 34