Align button text vertically in the middle using Flexbox with Bootstrap 4

Why is the text in the button displaying at the top instead of the center when using internet explorer?

button {
  height: 100px;
}
<div class="container">
  <button class="w-100 f-default-f btn btn-primary d-flex justify-content-between px-3">
    <div>Text</div>
    <div>icon</div>
  </button>
</div>

I included a codepen link with Boostrap 4 alpha to demonstrate:

https://codepen.io/anon/pen/PaqLNm

The button behaves as expected in Mozilla Firefox and Chrome, but not in Microsoft Edge or Internet Explorer.

csstwitter-bootstrapflexboxbootstrap-4microsoft-edge

Answer №1

To center child elements vertically, simply include the align-items-center class in the button element.

Please note: After testing on Edge, IE11, and IE10 browsers, it was confirmed that this fix works perfectly fine.

For a demonstration, you can view it here

HTML

<div class="container">
  <button class="w-100 f-default-f btn btn-primary d-flex align-items-center justify-content-between px-3">
    <div>Text</div>
    <div>icon</div>
  </button>
</div>

Answer №2

If you are utilizing flex in your code, keep in mind that it only has partial support on IE11 due to a significant number of bugs.

https://i.stack.imgur.com/LNz1x.png

For instance, IE 10-11 always assumes a content box model when using flex-basis to determine the size of a flex item, even if the item is set to box-sizing: border-box.

Some other known bugs include:

-IE 11 requires a unit to be added to the third argument, the flex-basis property (more info)

-In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed children's sizes if the container has a min-height but no explicit height property.

-IE 11 does not vertically align items correctly when min-height is used

Sources: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis https://caniuse.com/#search=flex

Answer №3

Have you checked for a lineheight property in any of your CSS files?

Consider adjusting this value to align the text within the button correctly for Internet Explorer (and likely Edge as well).

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

Deactivate the Autofill feature on Google Toolbar

Dealing with the Google Toolbar's autofill feature has been a constant frustration in my web development journey over the years. I have resorted to creating a timer control to monitor changes, as the developers overlooked firing change events on contr ...

asp.netjavascripthtmlcss

Ace code editor: A guide to implementing hover error messages

Using an Ace editor, I want to enhance my website by highlighting specific code ranges and displaying error messages when they are hovered over, just like in the example image. I'm curious if this functionality can be achieved through the Ace editor ...

jqueryhtmlcssace-editor

The outline none property on the Material UI IconButton is malfunctioning

Attempting to style with CSS as shown in the following example: <CustomColorIconButton> <DeleteForeverIcon /> </CustomColorIconButton> const CustomColorIconButton = withStyles({ root: { color: "#ff8833", ...

cssreactjsmaterial-ui

The content within a container that has flex-grow: 1 is exceeding its bounds instead of being able to scroll

I am currently facing an issue with a container that is set to grow within a fixed size container and I need help figuring out how to make the content wrapper element scrollable. Specifically, the flex-grow container houses a div that is larger than the c ...

htmlcssflexbox

Tips for utilizing CSS flexbox to create a row of squares that can scale while maintaining their aspect ratios

Struggling with this issue has me on the verge of pulling my hair out. It seems like a simple task, yet I can't seem to achieve perfection. My goal is to create a row of squares that maintain their aspect ratio but scale down in size as their containe ...

htmlcssflexboxcss-gridresponsive

What is the best method for combining several variables into a single one using a parameter?

On the webpage, there is a table containing 11 checkboxes. I am looking to create a keyword that allows testers to input just 1, 2, or 3 to select a specific checkbox without needing multiple lines of element variables. Here are the elements: xpath=(//in ...

cssseleniumxpathrobotframework

Developing automation scripts in C# using Visual Studio with Selenium specifically for Edge browser on the

Having recently embarked on my journey to learn C# Selenium using Visual Studio 2015, I encountered a challenge while attempting to test a random website using the Edge browser. Despite installing the latest versions of Selenium support (v3.141.0), Seleniu ...

c#seleniumvisual-studio-2015microsoft-edge

I possess a pair of UI tabs. Whenever a button located outside the tab is clicked, I am required to activate a distinct tab

As a beginner in Javascript, I recently encountered an issue with a UI tab element that contains two tabs. My goal is to create a button that, when clicked, will scroll up and activate the second tab. <style> .tab-container { overflow-x: ...

javascriptjqueryhtmlcss

Enhancing D3 visualization with centralized alignment and mobile-friendly responsiveness

I am still quite new to JavaScript and development in general, so I may be overlooking something obvious. Although I have successfully created a chart using d3, I am struggling with positioning. No matter how much I manipulate it with CSS, the chart just d ...

javascriptcssd3.js

Trouble with toggling class "collapsed" in Bootstrap v3 Navbar-toggle when using multiple data-targets

When using the data-target attribute with multiple CSS selectors, the behavior of toggling the "collapsed" class in navbar-toggle does not work as expected. If only one selector is used, the class is toggled properly, but when multiple selectors are specif ...

jquerycsstwitter-bootstrap-3

What is the best way to position HTML labels with CSS3 flexbox?

Check out my codepen to see what I need by clicking on this link: https://codepen.io/tbellmer/pen/RdxBdQ I am new to this and although the form works, I require help with the design. I want both the Action: and Comment: labels to be aligned to the right. ...

htmlcssflexboxlabelalignment

Create a radial-gradient() that covers two separate elements

Seeking to create a spherical appearance for a circle made of two semi-circular divs using background: radial-gradient(). Any ideas on achieving this effect without combining the two semi-circle divs into one circular div? [The decision to use two semi-ci ...

cssradial-gradients

Is it possible to create a CSS design where alternating table rows have two different heights?

Looking to design a table where the height of every other row is approximately one-third of the preceding row. I've managed to style this with an inline method, but I'm curious if it's possible to create separate tags for different tr styles ...

htmlcsshtml-table

Adjusting the size of Bootstrap alerts while ensuring the close icon remains correctly positioned

Below is the HTML code snippet I am working with: <div class="row mt-2"> <div class="col-lg-5"> <div id="alertmessages"></div> </div> <div class="col-lg-7"> <div class="btn-group-sm"> ...

javascriptcssbootstrap-4

Ways to position a child element at the center of its parent container?

Hey there, is there a way I can achieve this specific layout without relying on position: absolute? Flexbox would be the preferred method. The main goal here is to have the middle element horizontally centered within its parent element, regardless of other ...

htmlcss

Transform the color of Max Mega Menu items on hover with another item in WordPress

Seeking help to change the color of my megamenu item when hovering over other items in the menu. Take a look at this image for reference: I've tried using these CSS styles but it didn't work as expected. #mega-menu-wrap-primary-menu #mega-menu-p ...

csswordpresswordpress-themingmegamenu

Animation of active chat list items on Whatsapp

Has anyone figured out a simple method to create an animation like the one in Whatsapp? For example, when you are on a chat screen and go back to the chat list, have you noticed how an active element is briefly highlighted in gray (to indicate which chat ...

javascriptcssanimation

Applying ngClass to a row in an Angular material table

Is there a way I can utilize the select-option in an Angular select element to alter the css-class of a specific row within an Angular Material table? I have successfully implemented my selection functionality, where I am able to mark a planet as "selecte ...

htmlcssangulartypescriptmat-table

What could be causing the occasional appearance of a tiny glitch, like a pixel dot, below a menu item when utilizing this hover effect?

Occasionally, a tiny dot appears almost imperceptibly, like the one below the "prices" menu item: https://i.stack.imgur.com/kyaP3.png This is the hover effect code I created: :root { box-sizing: border-box; } *, *::before, *::after { box-sizing: ...

htmlcsscss-transitions

What's the best way to navigate across by simply pressing a button located nearby?

Hey there! I'm new to JavaScript and I'm working on a shopping list page for practice. In my code, I can add new items to the list, but what I really want is to be able to cross out an item when I click the "Done" button next to it, and then uncr ...

javascripthtmlcssdom