vertical align doesn't work on a span in a flexbox container

user_5481714 0
Viewed 366

For some a reason vertical-align: middle on a span doesnt work.

.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.

So vertical-align is for inline elements. span is inline.

Why doesn't it work?

Vertical align middle not working in span element

You can use display: flex to achieve this.

My container is flex.

What's wrong?

flexbox css html
1 Answers

Per the MDN definition you posted for the span element:

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

True, the default display value of a span element is inline. But this value is overridden in a flex container.

All children of a flex container, regardless of their element type, are considered block elements.

From the flexbox spec:

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

Hence, vertical-align will not work on a span or any other "inline" element once they become flex items. Use flex alignment properties instead.

user_35972760
Related