Using `vertical-align` on a `span` inside a flexbox container may not produce the desired result

Some users are experiencing issues with the vertical-align: middle property not working on a span.

.tc__timezone-toggle {
  display: flex;
}

.tc__timezone-toggle span {
  vertical-align: middle;
}

.tc__timezone-toggle-ui {
  display: block;
  font-weight: 700;
  color: var(--tc-blue) !important;
  background-color: #E3E3E3;
  padding: 10px;
}

a.tc__timezone-toggle-ui {
  border-radius: 22px 0px 0px 22px;
}

.tc__timezone-toggle-ui:last-child {
  border-radius: 0px 22px 22px 0px;
}
<div class="tc__timezone-toggle">
  <span>TimeZone</span>
  <a class="tc__timezone-toggle-ui" href="#">PT</a>
  <a class="tc__timezone-toggle-ui" href="#">ET</a>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

The span HTML element is a generic inline container for phrasing content, which does not inherently represent anything.

Therefore, vertical-align is typically used for inline elements, and since span is an inline element, why isn't it working?

Vertical align middle not working in span element

One solution could be to use display: flex.

Considering that my container already has a flex display, what could be causing the issue?

htmlcssflexbox

Answer №1

According to the information you shared from the MDN definition, the span element is described as a versatile inline container for text content that does not have a specific meaning.

In its default state, the span element has a display value of inline. However, in a flex container context, this display property can be altered.

When inside a flex container, all children elements are treated as block-level elements, regardless of their original type.

As stated in the flexbox specification:

The display value of a flex item is adjusted to behave like a block-level element: if an inline child element of a flex container parent is specified with an inline-level display property, it will be computed as a block-level equivalent.

Thus, attempting to use vertical-align on a span or any other "inline" elements once they become part of a flex layout will not produce the desired effect. It is advisable to utilize flex alignment properties instead.

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

Escape key does not close the modal dialogue box

I’ve customized the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on a webpage. Although it functions as intended, I’m struggling to implement a way to close it by pressing the escape ...

javascripthtmlcssmodal-dialog

Creating a virtual roulette wheel with JavaScript

I'm currently working on creating a roulette wheel using JavaScript. While researching, I came across this example: , but I wasn't satisfied with the aesthetics. Considering that my roulette will only have a few options, I was thinking of using ...

javascriptjqueryhtmlcss

Appending an empty <li> tag has no effect

I'm facing an issue with this loop where it always generates empty <li></li> tags. Can anyone help me understand why this is happening and suggest a solution? For reference, the loop runs 2 times (verified). function a(){ for (var i ...

javascriptjqueryhtml

The BeautifulSoup parsing result differs from the code of the original HTML page

Lately, I've been using BeautifulSoup4 to scrape data from Spotify Charts. It's been working smoothly for a few weeks until today when it suddenly started giving NaN values for all the entries... I suspect that the issue lies in the parsed HTML ...

pythonhtmlparsingbeautifulsoupspotify

Issue with the Dropdown menu in Metro UI CSS - not functioning properly

I have integrated the METRO UI CSS into my project and created a dropdown menu. The design looks great, but unfortunately, the dropdown list is not appearing as expected. To implement this feature, I followed the example provided on the following link: H ...

jqueryhtmlcsswindows-8metro-ui-css

"Apply a class to a span element using the onClick event handler in JavaScript

After tirelessly searching for a solution, I came across some answers that didn't quite fit my needs. I have multiple <span id="same-id-for-all-spans"></span> elements, each containing an <img> element. Now, I want to create a print ...

javascriptjqueryclassonclickhtml

How do I create a clean HTML file when using the email editor with TinyMCE?

I was able to develop my own email editor, inspired by this particular example. To enhance user experience, I included a download button at the end of the file so that users can easily retrieve their edited content. The issue I'm facing is that tinym ...

javascripthtmljquerytinymce

Tips for avoiding HTML injections in HTML tooltips

I'm attempting to create a tooltip using HTML, but I need to escape specific HTML elements within it. So far, my attempts have been unsuccessful. Take a look at the example I've provided: http://jsfiddle.net/wrsantos/q3o1e4ut/1/ In this example ...

javascripthtmltwitter-bootstrap-3

Calculate the sum of multiple user-selected items in an array to display the total (using Angular)

Within my project, specifically in summary.component.ts, I have two arrays that are interdependent: state: State[] city: City[] selection: number[] = number The state.ts class looks like this: id: number name: string And the city.ts class is defined as f ...

javascripthtmlarraysangulartypescript

Integrating external JavaScript widgets into the web application in real-time

I am currently engaged in a React js project that involves the dynamic addition of third party scripts (widgets) to the web app. These widgets encompass various third party platforms such as Twitter, Instagram, Youplay, Youtube, and more. The existing co ...

javascripthtmlreactjs

What is the reason behind the Chrome icon flickering momentarily while loading certain web pages?

I recently put together a basic html document, here it is: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> <title>Just a test.</title> </head> <body> <svg ...

htmlgoogle-chrome

Try utilizing MutationObserver to monitor changes in various nodes

I am faced with a situation where I have elements in my HTML that are dynamically populated with text from an API. My goal is to check if all these elements have a value and then trigger a function accordingly. The current code I have only allows me to obs ...

javascripthtmlmutation-observersmutation

Is there a way to verify that all CSS files have been successfully downloaded before injecting HTML with JavaScript?

I am looking to dynamically inject HTML content and CSS URLs using JavaScript. I have more than 3 CSS files that need to be downloaded before the content can be displayed on the page. Is there a way to check if the aforementioned CSS files have finished ...

javascriptcssajaxparallel-processing

Interested in customizing the hover color of the header links in WordPress?

I'm currently working on customizing the hover color of the links in my WordPress header created with Elementor Page Builder. I tried several CSS solutions by inspecting elements and adding them to the custom CSS section in WordPress, but none seemed ...

htmlcsswordpress

Discover the ultimate guide to harmonize IE 9 with the ingenious Bootstrap Multiselect plugin developed by davidstutz

I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...

jqueryhtmlcsstwitter-bootstrapbootstrap-multiselect

When the JS function 'postMessage()' is invoked on an HTML object tag, what specific action does it perform?

Not too long ago, I found myself on a quest to figure out how to trigger the print function on a PDF that I was displaying in Adobe AIR. With a bit of guidance from a helpful individual and by utilizing postMessage, I successfully tackled this issue: // H ...

javascripthtmlactionscript-3pdfobject-tag

implementing a delay after hovering over a CSS hover effect before activating it

I'm trying to achieve a specific effect using JavaScript or jQuery, but I'm struggling to figure it out. I have created a simple CSS box with a hover effect that changes the color. What I want is for the hover effect to persist for a set amount o ...

javascriptjquerycss

Arrange a div close to another div with the help of absolute positioning

My goal is to create a tooltip-like positioning for an element within the same container as another element. When clicked, this particular element will display a div containing a table. You can find the complete code here: http://jsbin.com/xihebol When s ...

javascripthtmlcss

PHP offers a different solution instead of using an HTML hidden input tag

Is there a way to pass a value from one HTML form to another without using hidden input fields? I need this value for a prepared SQL statement. I'm concerned about security risks associated with using hidden input fields. Does anyone have an alternat ...

phphtmlformshidden

I require the flexbox children to be arranged in a regular manner

How can we set flexbox children to default layout behaviors? Let's make them behave like the disobedient kids they are. .wrapper { This should be a row } .column { Make all heights equal display: flex; } .child { Back to regular display...wit ...

cssflexboxchildren