Align text vertically within labels and links styled with bootstrap

When using bootstrap button styled labels and links with a larger height than default, the text tends to be vertically aligned at the upper side of the button. However, when using an actual button element, the text is centered vertically.

Is there a way to center the text vertically in all cases?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<label class="btn btn-primary" style="height: 80px; margin-bottom: 0">Label Button</label>
<a href="#" class="btn btn-primary" style="height: 80px; margin-bottom: 0">Link Button</a>
<button class="btn btn-primary" style="height: 80px">Actual Button</button>

htmlcsstwitter-bootstrap

Answer №1

Make the button taller by adding this line to its class:

line-height: 60px;

Alternatively, you can achieve the same effect with the following code:

display: inline-flex;
align-items: center;

See example below for reference.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<label class="btn btn-primary" style=" display: inline-flex;
  align-items: center;
     height: 80px; margin-bottom: 0">Label Button</label>
<a href="#" class="btn btn-primary" style="line-height: 60px; height: 80px; margin-bottom: 0">Link Button</a>
<button class="btn btn-primary" style="height: 80px">Actual Button</button>

Answer №2

Group :

vertical-align:middle;
line-height:80px; //this should match the height of your parent container


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<label class="btn btn-primary" style="vertical-align:middle;line-height:80px;">Labelled Button</label>
<a href="#" class="btn btn-primary" style="vertical-align:middle;line-height:80px;">Linked Button</a>
<button class="btn btn-primary" style="vertical-align:middle;line-height:80px;">Real Button</button>

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

An oversized image creates additional room

I currently have a board that consists of 3 blocks, with each block containing a grid of 25 squares. These squares are 40x40px in size with a margin around them, resulting in an overall size of 220px x 220px. Each square also has some space above and below ...

htmlcss

Windowing box inside a container box

I am looking to implement scrolling for just the "chat-messages" div within the "chat-bar" div on my site. I want only this specific section to be scrollable, while the rest of the site remains stationary. Currently, I have to scroll through the entire pag ...

javascriptjqueryhtmlcss

Using JavaScript to interact with text elements in external SVG documents

When it comes to creating an SVG within HTML and assigning specific IDs to text elements for easy access, everything works smoothly. For example, I can easily retrieve the ID using: let callQSO = document.getElementById("QSOcall").value; and th ...

javascripthtmlsvggetreact-native-svg

In IE8, displaying an element with jQuery does not cause the footer to be pushed down

I've tried various methods to solve this issue, but none have been successful so far. To better illustrate my problem, I have created a FIDDLE. When the button is clicked, a hidden element is displayed. However, it does not adjust the footer position ...

jqueryhtmlcssinternet-explorer-8

Enabling visibility of overflowing text in dynamically inserted divs without using scroll bars

Is there a way to set the text overflow to visible without scroll bars in dynamically added <div>s? Despite what the documentation says, it doesn't seem to be the default behavior and I'm struggling to understand why. Adding text directly t ...

javascripthtmlcssoverflow

Place the image at right:0px position, but it won't display

I am trying to position an image at the end of a sentence within a div element. No matter what I try, the image always appears next to the end of my text. Here is the code I am using: <div id='xi' class='xc'>Text comes here and ...

jquerycss

Activate a specific component of hover effect within multiple components generated by the `v-for` loop

Hey there! I'm currently facing a CSS challenge related to Vue. Let's say I want to display multiple components using v-for, and I want to add a hover effect to each component individually. The goal is to have the hover effect only apply to the c ...

cssvue.js

Is there a way to ensure consistent heights for various elements within a column, even if their heights are

Currently, I am utilizing the flex property to create uniform columns and vh to ensure they have the same height. This setup is functioning properly, but within each column, there could be a varying number of items. I am interested in having the elements w ...

htmlcssflexbox

What is the best way to remove this .click function?

My goal is to create a switch function where clicking the "on" button changes its CSS, and if the user then clicks on the "off" button, the CSS returns to normal. I also need the switch to default to the "on" position, but my attempts so far have been unsu ...

javascriptjqueryhtmlcss

Creating a WordPress Infographic: How to Design a "Wide" Graphic

I have a question for those who are experienced with infographics. I'm in the process of getting an infographic designed for my blog and I've noticed that some websites have a feature that allows the infographic to expand to full width when you c ...

phpcsswordpress

Selecting elements using XPath

My goal is to target an i element using the following XPath: //div[contains(text(), "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32565356564153565341725e5d5d1c515d5f">[email protected]</a>")]//parent//i[contains(@c ...

htmlseleniumxpathselenium-webdriver

duplicate styling for individual table cells

I am in need of a span element inside a td tag that I am generating within a table. In order to ensure the span fills the td, I have set it as an inline-block with a width and height of 100%. However, when pressing the delete key in the last cell, it star ...

htmlcss

Develop an AJAX script for processing multiple form inputs in PHP and HTML

I am working on a code that involves multiple form submissions, but the submit functionality is not working due to having multiple submits on one page. I have realized that I need an Ajax script to handle this, but I am new to it. Can someone provide me wi ...

javascriptphphtmlcssajax

Replacing one <div> with another <div> using a clickable link within the divs

In one of my web pages, there is a div that I'll refer to as div1. Within this div, there is a link called 'Link1'. My goal is to click on Link1, triggering the replacement of div1 with div2. Inside div2 there will be another link, let&apos ...

javascripthtmlcssangularjs

What is the best method for extracting the innerHTML value of html tags using a css selector or xpath?

I am currently struggling with retrieving the HTML inner text value using CSS selector or XPath. While I can achieve this using document.getElementById, I am unable to do so using selectors. I can only print the tag element but not the text from it. For e ...

javascripthtmlcssxpathcss-selectors

Can anyone help me with fixing the error message 'Cannot assign to read-only property 'exports' of the object' in React?

Recently, I decided to delve into the world of React and started building a simple app from scratch. However, I have run into an issue that is throwing the following error: Uncaught TypeError: Cannot assign to read-only property 'exports' of o ...

javascripthtmlcssnode.jsreactjs

Achieving Left and Right Alignment of Navigation Elements using Flex Basis in Chakra UI with Next JS

For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challeng ...

cssreactjsnext.jsflexboxchakra-ui

Is it possible to embed HTML within standard PHP without using alternative methods?

Is it possible to embed HTML inside a PHP "if" statement? The top-rated answer in this thread on Stack Overflow discusses using alternative if style. While other answers suggest that it also works with normal if statements, the question remains: is this a ...

phphtml

Should I implement this practice when developing an AJAX website? Is it recommended to enable PHP code within .html files, or should I switch to using .php files instead?

Query: I am interested in executing PHP within HTML documents to include HTML using PHP include();. Question: Would it be more beneficial to change .php to .txt for my AJAX-loaded pages and switch my .html files to .php? This approach might resolve the ...

javascriptphphtmlajax

Guide to showcasing an image on an HTML page using HTTP header

I have an HTML page with a basic layout that includes a single button. When this button is clicked, it needs to trigger an HTTP request to a specific URL while including an Accept header for GET requests. The response from the HTTP URL will vary depending ...

javascriptjqueryhtmlajax