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

Hide, show, toggle, or empty elements using jQuery

I am having trouble getting this jQuery code to function properly. Within a div, there is a paragraph that I want to hide when a specific button is clicked and show when another button is clicked. Check out the code here $("#details").on("c ...

jqueryhtmlcss

Extract hidden form variables using a function in PHP

Here is the JavaScript function that I have written: function GetCellValues() { var rows = document.getElementsByTagName('tr'); var str = ''; for (var c = 1 ; c < rows.length ; c++) { str += '\n&apo ...

javascriptphphtmlhidden

create a gentle appearance for an element

I am looking to replicate the visual appearance of each page on this particular website: There is something about the lighting that I really admire. I have attempted to recreate the animation, but I have been unsuccessful in my attempts. Any assistance wo ...

cssanimation

The footer menu fails to glide upwards

I designed a top menu for my website that includes 2 key features: Sticky navigation bar when scrolling Slide toggle navbar You can view the demo here: JSBIN However, I am facing 2 issues: When the page is at the top and the menu is in its default pos ...

jqueryhtmlcss

Guide to displaying a loading image when selecting an item from a dropdown menu using JavaScript

When using three drop-down lists and performing an AJAX call on each dropdown list's onclick function, I encountered a delay in loading the data. To address this issue, I attempted to display a loading image while processing the AJAX call. <form ...

javascriptphpjqueryhtmlajax

Traversing tables with JQuery's nextUntil function

I have a calendar table where I need to highlight the range from the pickup date, maybe 10 Feb, to the set date of 20 Feb. <tr class="rd-days-row"> <td class="rd-day-body rd-day-disabled">09</td> <td class="rd-day-body">10& ...

jqueryhtml

What is the reason for hasChildNodes returning true when dealing with an Empty Node?

When the user clicks on purchase and the cart is empty, there should be an alert. However, it seems that no response is triggered. Upon running the program, an error message appears stating that it cannot read the property of addEventListener which is unde ...

javascripthtml

Coldfusion: The Troubles of an Empty Link href="#" Error

For my CFWheels Coldfusion project, I have been utilizing Adobe Coldfusion Builder 3. In Coldfusion, when you want to output a variable, you typically do something like this: #variable_name# However, I am interested in incorporating an empty link into m ...

javascripthtmlcoldfusionescaping

"Sticky Top Button That Stays in Place When Scrolling | Innovative CSS & jQuery

I've been inspired by the "Proceed to checkout" button on amazon.com and I want to recreate it. However, I'm facing a challenge as their website is not responsive and I can't find a way to view a device user agent in Chrome. To see what I&ap ...

javascriptjquerycss

Rails 5 not allow user submission of bootstrap modal form

I am facing an issue with a form inside a modal in my Rails application. When I click on the submit button, nothing happens. How can I use Ajax to submit the modal form and save its content on another page? <button type="button" class="btn btn-primary ...

javascriptjqueryhtmlruby-on-railsajax

Javascript eval function providing inaccurate results

I have encountered a problem while using eval() for a calculator I am developing. When I input the following code: console.log(eval("5.2-5")); The output is: 0.20000000000000018 I am confused as to why this is happening. Thank you for your assistance. ...

javascripthtmleval

Tips for enlarging the font size of a number as the number increases

Utilizing the react-countup library to animate counting up to a specific value. When a user clicks a button, the generated value is 9.57, and through react-counter, it visually increments from 1.00 to 9.57 over time. Here's the code snippet: const { ...

cssreactjstypescript

Printing with tiled SVG background images

Whenever I use an SVG tile as the background for my website, it appears perfectly fine when viewed in a browser. However, when I try to print the page, it scales in a strange and nonuniform way. Is there a solution to prevent this distortion when printing ...

csssvgbackground-image

Navigating through the CSS menu located in the main directory

I am facing an issue with accessing my CSS menu in different directories. In my root directory, I have a CSS menu that I want to use in subdirectories as well. However, when I navigate to a subdirectory, I find it difficult to go back to the main directory ...

phphtmlcss

Retrieve the URL from an iframe using Python and Selenium

On my website's main page, there is an iframe containing the text Code: LWBAD that I need to retrieve. For a clearer visual, refer to the image below: Below is the source code of my main HTML page which includes the mentioned iframe: <td class=" ...

pythonhtmlseleniumiframe

What is the best way to set up the correct pathway for displaying the image?

I'm currently facing a challenge with displaying an image from my repository. The component's framework is stored in one library, while I'm attempting to render it in a separate repository. However, I am struggling to determine the correct p ...

javascriptcssreactjsmaterial-ui

Code snippet for replacing text enclosed between two tags using regex in PHP programming language

While I am not an expert in regex, I am attempting to develop a code inspired by examples I have come across. My goal is to replace instances of the string <li> with <li class="ingredient"> within a WordPress table. However, this replacement mu ...

phphtmlregexwordpressreplace

jQuery for validating input fields with positive integers only using regular expressions

I currently have two input fields in my HTML that look like this: <input type="text" class="txtminFeedback" pattern="^\d+([\.\,][0]{2})?$" placeholder="Minimum Feedback"> <input type="text" class="txtmaxFeedback" pattern="^\d ...

javascriptjqueryhtmlregexvalidation

What is the process for saving an SVG element from an HTML page as a downloadable text file?

I've been practicing creating SVG elements from scratch on an HTML page using Javascript. The texts within the SVG element are styled with typefaces fetched from the server through a "@font-face" declaration in the CSS file. It's been quite succe ...

javascripthtmlsvgtext

Is there a way to modify the scroll ion-content's color scheme?

Is there a way to change the scroll color in Ionic to green, specifically for ion-content? Any suggestions on how I can achieve this? Below is my HTML code: <ion-header> <ion-toolbar> <ion-buttons slot="start"> ...

htmlcsstypescriptionic-framework