Content and picture within a <button> element do not align on the same row when using flexbox in Firefox browser

I need assistance in aligning a button with an image and text in the center of the same row. However, in Firefox, the image and text appear on separate lines. How can I resolve this issue?

This is my current code snippet:

button {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}

button img {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

button span {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

Link to JsFiddle for reference

htmlcssflexbox

Answer №1

There are certain HTML elements that do not allow changes to the display property. Three examples of these elements include:

  • <button>
  • <fieldset>
  • <legend>

For example, setting display: table on a fieldset will not have any effect.

Similarly, if you try to apply display: inline-flex to a button, the browser will ignore it.

There are other limitations as well. For instance, some browsers may not support overflow: scroll on button elements. (Tested: Firefox does not show scrollbars while Chrome does)

In summary, a button element cannot act as a flex container.

A simple solution is to wrap the content inside the button with a div and make the div the flex container. Alternatively, using a span instead of a div is also suggested for standards compliance.

HTML

<button href="#">
    <div>
        <img src="http://placehold.it/10x10">
        <span>Click me</span>
    </div>
</button>

CSS

div {
    display: flex;
    justify-content: center;
    align-items: center;
    }

DEMO

Please note: Although button elements cannot be used as flex containers, they can still be flex items.

Further reading:

Answer №2

Check out this demo:https://codepen.io/example/37/

Delete any existing styles and include only the following CSS code.

    h1 {font-size: 24px;}

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

Achieve a vertical scrolling effect within an ASP repeater by implementing CSS2.1 styling

I am having an issue with my aspx page where I need to call a repeater. The problem is, I want to have a fixed-sized page while keeping the scroll inside of the repeater. How can I achieve this? The div in my ASP wouldn't accept the overflow-y option ...

asp.netscrollrepeatercss

Creating an overflow effect for sliders using only CSS

Is it feasible to develop a slider that extends beyond its parent elements and the body? The concept involves having content within a section housed in a container. The slider would be part of this section, with slides overflowing past the parent element ...

csssliderpositionoverflow

The minimum and maximum validation functions are triggered when I am not utilizing array controls, but they do not seem to work when I use array controls

Take a look at the stack blitz example where min and max validation is triggered: https://stackblitz.com/edit/angular-mat-form-field-icrmfw However, in the following stack blitz with an array of the same controls, the validation does not seem to be worki ...

javascripthtmlangulartypescriptangular8

Using JavaScript to save variables to another HTML file

Within my project, I have 2 HTML files named index.html and results.html, along with a javascript file called file.js In the index.html file, user input is collected to perform calculations in the javascript file. The calculation process begins upon press ...

javascripthtmlhyperlink

Switching the root directory for the Next.js application caused a meltdown on the production server, while the development server and local build remained unaffected

TL;DR I modified my base path from "/" to "custom-subpath" and encountered CSS missing on the production server despite it working well on my local server. Please forgive me, as explaining this issue may be challenging due to my limite ...

cssdockernginxnext.js

Hide sub-strings using CSS display property as none

Is it feasible in CSS alone to conceal certain text within a string? I am aware of attribute selectors such as: [att^=val] - the "begins with" selector For example, given this: <div class="some_random_text"> This is a default text </div> ...

htmlcss

Saving user inputs using PHP Session

I've been tackling an HTML form where I want to ensure that the data entered gets saved even if there's a failed submit or a page refresh. To achieve this, we are utilizing PHP Sessions to store the data, and then reposting the elements when nec ...

phphtmlformssession

Selecting elements in Thymeleaf using jQuery

Is there a way to retrieve the value from the hidden field within the div shown below? <div class="col-lg-6" th:each="devicedit : ${eachdevicedetails}"> <div class="courses-container"> <div class="cou ...

htmljqueryspring-bootthymeleafhidden-field

Unable to interact with a button through Selenium

Utilizing the Selenium library in Java, I have written a script to automate tasks online. The script functions perfectly on popular sites such as Facebook and YouTube, but for some reason, it does not work on kingdoms.com. The button I am trying to click h ...

javascripthtmlseleniumselenium-webdriver

Leveraging Angular 2 directives in TypeScript to bind a value from a custom control to an HTML control

I have created a unique custom directive named "my-text-box", and within this directive, I am utilizing the HTML control <input>. I want to pass values from my custom control to the HTML input control. In Angular 1, I would simply do something like & ...

htmltypescriptangularangular2-directives

Display and conceal different sections using hyperlinks

Hey there, I'm back with another issue related to this code snippet on jsfiddle: https://jsfiddle.net/4qq6xnfr/9/. The problem I'm facing is that when I click on one of the 5 links in the first column, a second div appears with 3 links. Upon clic ...

javascriptjqueryhtmlcss

Handlebars: Access to the property "some prop" has been denied as it is not considered an "independent property" of its parent object

Model of MongoDB: const mongoose = require('mongoose'); const ProductSchema = mongoose.Schema({ _id:mongoose.Schema.Types.ObjectId, Pid:Number, Pname:String, Price: Number, Pdesc: String, Picname: String }); module.ex ...

htmlnode.jsmongodbmongoosehandlebars.js

Resetting the width of a CSS-styled div to its default maximum width

I have a set of automatically generated div containers that contain label and data information. For example: <div class="display-label"> @Html.DisplayNameFor(model => model.BusinessPhone) </div> <div class="display-field"> @H ...

htmlcss

What could be causing that unusual behavior within the quasar framework's select CSS?

I am facing an issue with a select control that needs to be aligned on the right side of the screen. Despite using HTML and CSS to achieve this, there is strange behavior when I initially click on the control. It breaks the options layout, but as I navigat ...

javascripthtmlcssvue.jsquasar-framework

Combining 2 divs harmoniously

I have a set of HTML div elements that are styled using the following CSS: div{ width:250px; height:250px; display:inline-block; border-radius: 10px; margin:10px; background:#2E2922; vertical-align:top; } In my HTML, these div ...

htmlcss

Rotating through elements in timed intervals

After exploring various examples of how to show/hide divs with a JavaScript timeout, I am still unable to resolve my specific issue. I currently have six divs that I want to cycle through sequentially every 10 seconds, starting with div #one. Although my ...

javascripthtmljquery

React Drag and Drop: Div Resisting Dragging

I recently attempted to create a drag and drop list feature in a React app without using any external packages. I came across a tutorial that claimed to achieve this. This is the code I implemented: class App extends React.Component { state = { ite ...

javascriptcssreactjsdrag-and-dropdrag

Backdrop dimming the Material UI Modal

My modal is designed to display the status of a transaction on my website, but I'm facing an issue where the backdrop dimming effect is being applied over the modal. Instead of appearing white as intended, the modal ends up having a dark gray tint. I ...

cssreactjstypescriptnext.jsmaterial-ui

Adjust the appearance of input fields that exclusively have the value "1"

When designing my website, I encountered a problem with the style I chose where the number "1" looks like a large "I" or a small "L." I am wondering if there is a way to use JavaScript to dynamically change the font style for input fields that only contai ...

javascriptjquerycss

Unable to save a dynamic FormArray within a FormGroup

My FormGroup consists of three FormControl fields and one FormArray field, as shown in the figure below. I need to collect the manager's name from the user. When the add button is clicked, the manager details should be displayed in a table. In the tab ...

htmlangulartypescriptangular6formarray