Vertical alignment with flexbox not functioning properly in Internet Explorer 11

I am attempting to use flex to center an icon within two divs. Below is the code snippet:

.div-1 {
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 50%;
  background-color: #228B22;
}
.div-2 {
  margin: auto;
}
i {
  color: #ffffff;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="div-1">
  <div class="div-2">
    <i class="fa fa-leaf fa-2x" aria-hidden="true"></i>
  </div>
</div>

This approach works well on most of the browsers I have tested, except for IE11 where the icon fails to vertically center and remains stuck at the top instead. Can someone suggest a solution to this issue or point out what might be incorrect in my implementation?

htmlcssinternet-explorerinternet-explorer-11

Answer №1

Internet Explorer 11 lacks full support for flexbox, indicating a potential issue with margins within the flex parent element. To address this, consider adding the following rule:

.div-1 {
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 50%;
  background-color: #228B22;
  align-items: center; /* Include this*/
}
.div-2 {
  margin: auto;
}
i {
  color: #ffffff;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="div-1">
  <div class="div-2">
    <i class="fa fa-leaf fa-2x" aria-hidden="true"></i>
  </div>
</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

Update the HTML weather icon with data from JSON

I have a collection of weather icons stored on my computer. How can I customize the default weather icons with my own set of icons? In the JSON file, there is a variable like this: "icon":"partlycloudy" <html> <head> <script src="http://c ...

javascriptjqueryhtmljson

Is it possible for me to use an image as a grid item?

I have a grid with 3 elements as shown below: Now, I am looking to replace the blue elements with images (they can be just placeholders). .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(30em, auto); justi ...

htmlcssresponsive-designcss-grid

How can I make a 100vh div stick to the screen?

Is there a way to fix a Google map in a div to the screen so that the map on the left side remains fixed while the content on the right side can scroll? I've tried using position:fixed but it doesn't seem to be working. See the pictures below for ...

htmlcss

The responsiveness issue with the Bootstrap button menu in my Django project is causing functionality problems

I am currently working on a Django project and have set up a static folder in my "accueil" application. However, when I resize the browser window, the button to show the menu does not function as expected. The template I downloaded for free is not working ...

djangohtmltwitter-bootstrapcss

Encountering the "Local resource can't be loaded" error when attempting to link a MediaSource object as the content for an HTML5 video tag

I'm attempting to make this specific example function properly. Everything runs smoothly when I click the link, but I encounter an error when trying to download the HTML file onto my local machine and repeat the process. An error message pops up sayi ...

javascripthtmlhtml5-videomedia-source

Box Pattern with Pop-Up Modal

Check out the grid of squares I've coded below: <div class='square-container'> <div class='square'></div> <div class='square'></div> <div class='square'></div& ...

javascriptjqueryhtmlcss

Conceal a particular object from view by selecting it from the menu

I want to hide a specific element when the burger button is clicked. (See CaptureElementNoDisplay.PNG for the element to hide) When I click the burger button again to close the menu, I want the hidden item to be displayed once more. I've successfull ...

javascripthtmljquerycss

Opening an HTML file in Eclipse is a simple process that can be

Q1) Is there a way to open this file in a browser for testing? Q2) Can I quickly open this in Chrome from Eclipse and test it? click here for image ...

htmleclipse

Creating a JavaScript function that responds to multiple click events

Can someone please help me out? I have the link to the output of my work below using JavaScript and HTML: My goal is for only one circle to be active when clicked, while the others are disabled. Currently, when I click on a circle and then another one, bo ...

javascriptjqueryhtml

Create an HTML component that expands to fill any leftover space on the page, without using flex

In my current situation, I have two elements positioned side by side with dynamic widths based on their content. The element on the right needs to fill up as much vertical space as possible without a set width. I am looking for an alternative to flexbox d ...

htmlcss

Dynamically updating the scroll area in Ionic using real-time data

Hello, I am currently working on an Ionic project and have created a code pen for it. At the moment, the code pen just displays an image with two buttons for zooming in and out. However, I have encountered an issue. When I click on zoom in and scroll to ...

javascripthtmlangularjsionic-framework

Hovering in Javascript

Imagine I have the following code snippet: <div class="class1"> ... random content </div> I want to use JavaScript so that when I hover over that div, a CSS attribute is added: background-color:#ffffe0; border:1px solid #bfbfbf; This is a ...

javascripthtmlclass

What is the best way to position the hamburger menu icon on the right side of the header?

I need some assistance with adjusting the position of my mobile hamburger menu icon. It's currently on the left side of the screen, but I want to move it to the right. I've tried making the changes myself using CSS and HTML, but I'm not an e ...

htmlcsshamburger-menu

The art of CSS Absolute Positioning and the Science of Body Sc

I'm trying to position an absolute div in the bottom right corner of a page. .absolute{ position: absolute; right:0; bottom: 0; } While this code works, I've noticed that when scrolling the page, the right/bottom position is relative t ...

csscss-position

minimize the size of the indigenous foundation input field

Currently incorporating this code snippet into my application: <Item fixedLabel> <Input style={{ width: 0.5 }}/> </Item> The fixedLabel element is extending the entire width of the screen. I have attempted adju ...

javascriptcsstypescriptreact-nativenative-base

How to use Vanilla JavaScript to toggle a click event on a list item (LI) that

I have a script that scans through a webpage and identifies a unique string, for example: multus –a –um. The page contains several <LI> elements with various text content, including instances of multus –a –um. I need a solution to locate an & ...

javascripthtmlcss

Can we limit the text in a specific cell to one line on a desktop for a responsive table?

I am facing a challenge with making the second cell in my table have a width of 100% while ensuring that the text stays on one line. While the mobile version is functioning correctly, I am struggling to find a solution for the desktop version as the last ...

cssresponsive-designhtml-table

Scripting method to transfer multiple subdirectories using a cpanel.yml file (excluding the use of the wildcard)

I have been referring to the documentation found at My current issue is that when I try to copy my subfolders, it doesn't work properly unless I use a workaround. The only way I am able to achieve the desired outcome is by utilizing the following co ...

htmlbashgityamlcpanel

What could be causing appendChild to malfunction?

I'm having an issue trying to create three elements (parent and one child) where the third element, an <a> tag, is not appending to modalChild even though it's being created correctly. modal = document.createElem ...

javascripthtmlcss

Guide on attaching an onclick event to a button created with a string in Next.js?

<div onClick={(event) => this.addToCart(event)}> <ReactMarkdownWithHtml children={this.props.customButton} allowDangerousHtml /> </div> In my current situation, I am facing an issue with the code above. The button is being rendered ...

javascripthtmlreactjsnext.js