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

Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

I've been working on recreating a design using HTML, CSS/SCSS in Angular. The design can be viewed here: NFT Landing Page Design Here is a snippet of the code I have implemented so far (Typescript, SCSS, HTML): [Code here] [CSS styles here] [H ...

htmlcssangulartypescriptsass

Steps for creating a square button

Is it possible to create a square button on my website that still functions like a traditional button? I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable: http://jsfiddle.net ...

css

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

I have a collection of links: <p><a href="#" class="floorplan initial" data-id="king"><strong>King</strong></a><br> 4 Bedrooms x 2.5 Bathrooms</p> <p><a href="#" class="floorplan" data-id="wood">< ...

javascriptjqueryhtmlcss

The fancybox's excess content is concealed

I've recently integrated fancybox 2 into my project and have encountered an issue when appending HTML content to the modal. I disabled scrolling, but now any overflowing content is being hidden. Could this be related to the max-height of the modal? Ho ...

javascriptjqueryhtmlcssfancybox-2

What is the best way to inject child nodes into parent nodes without causing the view to shift to the location where the element is being

While I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom-most element as it loads instead of maintaining the current view. Ideally, it should start at the top of the screen and remain there without any sudden ...

javascriptjqueryhtmlcss

Is it possible to change the background color using jQuery?

Can you assist me with this: I have a website and I am looking to modify the bg-coler when hovering over the menu (similar to how it works on the rhcp-website). I attempted using jquery for this, but unfortunately, it did not yield the desired result.. ( ...

javascriptjqueryhtmlcssjquery-hover

Determine the vertical dimension of an element through a JavaScript event listener

I've been working on creating an Apple-style image sequence scroller from a codepen demo. Here's the link to the original: https://codepen.io/jasprit-singh/pen/LYxzQjB My goal is to modify the JavaScript so that the scroll height is based on a p ...

javascripthtmlcss

Inheriting modal properties from external links in Bootstrap

I've encountered an issue with my code. Whenever I click on the View Receipt link, it should display an external link to the receipt image in a modal. I'm working with Twig and Slim framework for this project. Here's the HTML file using Twi ...

phpjquerytwitter-bootstrapbootstrap-modalslim

Utilize CSS to ensure divs display inline-block, but stack them only if they overlap

Below are the div elements I have: .parent { padding: 10px; background: grey; } .child { background: green; display: block; position: relative; width: 50px; } .stacked { left: 0px; } .three { left: 200px; } <div class="parent"&g ...

htmlcssdisplay

Out-of-sync movement in animated characters

Looking for some assistance with my page coding. I have a scenario where two stars are moving around a button, simulating an animation by incrementing the CSS properties top and left. Initially, everything appears fine and they move synchronously. However, ...

javascripthtmlcssanimation

Modify the width of the inner or child elements

My parent container can contain either 1, 2, or 3 child elements. When there is only one child element, it should take up 100% of the width. If there are two child elements, they should each have 50% of the available width. And if there are three child e ...

css

What could be causing my Link to malfunction in my about.js file?

I've encountered an issue where clicking the link in my app doesn't produce any result, and I'm unsure of the cause. Below is the content of my app.js file: import './App.css'; import {BrowserRouter as Router, Routes, Route} from ...

javascriptcssreactjs

Trouble With OnClick and On/Off Class Script Functionality in Chrome and Internet Explorer

I am working on a page with two iframes and a basic navigation bar. The navigation bar links are set up to target one of the iframes and replace its content when clicked. However, I am having trouble highlighting the currently selected link in the iframe - ...

javascriptphphtmlcssfirefox

CSS: Using absolute and relative positioning within a parent element can result in elements overlapping

I want to create a box in html/css where the read more hyperlink text is positioned over the background image. The goal is to have additional text added to the description without overlapping the image. Here's an example of the current issue. Curren ...

htmlcsssass

Setting a fixed row height for Material-UI tables in ReactJS, even when the content is long

I'm currently working on a listing component using the material UI table in ReactJS. Within this table, I have a ResumeUrl field that can span over 3 or 4 lines, but I need to limit it to just 2 lines with the rest of the content being represented by ...

cssreactjsmaterial-ui

Buttons containing two lines of text appear bigger compared to those with only one line of text, but it is essential for all buttons to be consistent in size with the single line buttons

I am facing an issue with the buttons on my website, as they seem to resize based on the amount of text present. When there are 2 lines of text, the buttons appear larger compared to those with just one line. How can I rectify this situation? Although thi ...

phphtmlwordpresscss

Implementing a Class Addition Functionality Upon Button Click in AngularJS

I have a form that initially has disabled fields. Users can only view the information unless they click the edit button, which will enable the fields with a new style (such as a green border). I want to add a class to these fields that I can customize in m ...

javascriptjqueryhtmlcssangularjs

Adjust Fabric js Canvas Size to Fill Entire Screen

Currently, I am working with version 4.3.1 of the Fabric js library and my goal is to adjust the canvas area to fit its parent div #contCanvasLogo. I have tried multiple approaches without success as the canvas continues to resize on its own. Below is the ...

javascriptjquerycsscanvasfabricjs

CSS class malfunction - various classes with identical functions

I'm new to the world of web development and design, embarking on a journey to learn all I can in these fields. Recently, I attempted to create unique hover styles for each menu button within my CSS classes-based menu list. However, I encountered an i ...

htmlcss

Tips for automatically displaying the first option as selected in an HTML Select dropdown

I have an HTML select element where I want the option chosen by the user to not be displayed in the box. Instead, I would like the box to always show the first option, regardless of what the user selects from the dropdown menu. Below is my CSS code for sty ...

javascriptjqueryhtmlcss