Align the text vertically in a Bootstrap button

Can anyone lend a hand with vertically aligning text in a Bootstrap button?

When I use the align-middle class, the text is aligned as desired. However, if I use the align-top class, the text remains top-aligned no matter what I do. Any suggestions?

Here's a screenshot of the buttons:

https://i.sstatic.net/7RY9l.png

/* 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>

htmlcssbootstrap-4

Answer №1

A common problem arises when using an anchor tag within Bootstrap, as it remains an inline element and is aligned based on line-height. This issue can be resolved by utilizing flexbox and adding the classes 

d-flex flex-column justify-content-center
to properly center the content.

/* 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Express identifies the user, however, the username is displayed exclusively on one specific page. This situation may indicate a potential cookie problem

I am in the process of developing an express app integrated with MongoDB. The issue I am facing involves a pug template for the navigation bar where I aim to display the user's name at the top upon logging in. Strangely, it only works on the page that ...

javascripthtmlnode.jscookiespug

Retrieve only the most recent input value

Currently, I am working with a text input to capture user input. As of now, here is my code snippet: $(myinput).on('input', function() { $(somediv).append($(this).val()); }); While I want to continue using the append function, I am facing an i ...

javascriptjqueryhtml

Adjust the quantity of divs shown depending on the value entered in a text input field

It seems like I am on the right track, but there is something simple that I am missing. I'm currently utilizing the jQuery knob plugin to update the input field. $('document').ready(function() { $(".knob").knob({ c ...

javascriptjqueryhtmlfilter

Exploring the world of CSS font families in Sublime Text 3 and linking them to the web

Is there a way to connect a font from the internet (such as those on Google Fonts: ) to my Sublime Text CSS file? I have tried linking it to an HTML file that is already linked to my CSS code, but it hasn't been successful. ...

htmlcsssublimetext3font-family

Expanding across the entire horizontal space, excluding any space allocated for

I've been on a quest to find a solution for my unique problem, but all my efforts have been in vain so far. Currently, I'm working on developing a mobile website and facing a challenge with the input boxes. Despite wanting them to take up the en ...

htmlcss

Bootstrap 5: After tapping on the button, the hue was transformed

I've been using Bootstrap buttons and I decided to change the color of one. However, when I clicked the button, it still changed to blue even though I specified ".btn-primary:active". HTML: <button type="button" class="btn btn-prima ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to initiate a function upon each page load?

(Apologies in advance for any English mistakes) Hello everyone, I am currently developing a simple Chrome extension to edit certain graphics and text fields on a website (Freshdesk) that cannot be modified directly on the site due to proprietary code. ...

javascriptjquerycssgoogle-chrome-extension

Seamless animated loading gif as a looping background visual

Is there a way to find a GIF that can be used as a repeated background on an HTML element, creating the illusion of a seamless block? https://i.sstatic.net/5BKxW.gif (source: opengraphicdesign.com) I am looking for an 80x80 GIF that can be repeated as ...

cssanimated-gif

Dynamic div positioned over image

Is there a way to create a responsive div on top of a responsive image? I'm having trouble getting the div to fully align with the image in my code. Can anyone offer assistance? Check out the codePen here HTML Code: <div class="container-fluid ...

htmlcsstwitter-bootstrap

Is there a way to align my green button beside the red button instead of below it?

I'm looking to rearrange the positioning of my green button on the screen. When I initially created the button, it ended up below my red button, but I want them to be displayed side by side. I haven't attempted any solutions because I am a beginn ...

htmlcss

What is the method of adding a child to the outerHTML of the parent element instead of within it?

Is there a way to use the outerHTML method on a parent element to append a child element so that the icons appear outside of the targeted element rather than inside it? The current code snippet shows the icons inside the box, but I want them to be placed o ...

javascripthtmlcss

Svelte remains static and is not experiencing re-rendering

I am currently incorporating the history component in Svelte, where it should display when changes occur in the bids array. const bidsArray = [ { player: 0, bidType: 'pass' }, { player: 1, bidType: 'level', level: '1&apos ...

javascripthtmlsvelterenderrerender

Tips for adjusting the width of the scrollbar track (the line beneath the scrollbar)

How can I style a scrollbar to match this specific design? https://i.stack.imgur.com/KTUbL.png The desired design specifies that the width of -webkit-scrollbar-thumb should be 5px and the width of -webkit-scrollbar-track should be 2px. However, it is pro ...

htmlcssscrollscrollbar

The appearance of CSS output is noticeably distinct between iPhones and personal computers

My issue is with the development of my website. When I access it on my PC, everything looks fine. However, when I try to visit the site on my iPhone, there is a noticeable difference in the output. The space above the navigation bar appears differently whe ...

ioscssiphonebrowser

Adjusting the width of columns in a table

Previously in Bootstrap 3, I was able to use col-sm-xx on the th tags within the thead to resize table columns as needed. However, this functionality is no longer available in Bootstrap 4. How can I achieve a similar effect in Bootstrap 4? <thead> & ...

csstwitter-bootstraphtml-tablebootstrap-4

What is the method for configuring input in a session without having to submit it?

I am encountering a major issue with my PHP MVC pattern website. On one page, I did not implement a "POST" submit method and now I am facing difficulties in passing quantity to the products/order page. If I use a Submit button, the next page does not funct ...

javascriptphpjqueryhtml

Only the first cell is affected by the background color setting

... <th style='background-color:#cccccc;font-weight:bold'><td></td><td>Address</td><td>Last Name</td><td>First Name</td><td>ZIP Code</td><td>City</td></th> ...

htmlcss

Stop capturing mouse and keyboard events within a specific div element on all web browsers

I manage a website with forms that have jquery autosave features and are updated using ajax. These forms include various types of input elements such as textboxes, jQuery UI datepickers, and time pickers... <div id="content"> <form id="line1"&g ...

javascriptjqueryhtml

Choose the initial drop-down option and concentrate on it

How can I target the first drop down node (select element)? I have tried using this code to focus on the first input, but I am looking for a way to target the first select (drop down). $('.modal :input:first').focus(); Unfortunately, this meth ...

jqueryhtmlcss

Linking issue with href tag

I am having trouble with my download links for PDFs of my Chinese articles. I've tried different approaches, but none of them seem to work. I even attempted linking it to my homepage as a test, but still no luck. <link href="http://unique-domain.c ...

html