Vertically Align Text within Bootstrap Button [duplicate] - html

Question

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 9 months ago.
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:
/* 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>

Answer 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>