How Does the Vertical-Align Property Work

How does the vertical-align property work?

Simply said: vertical-align is only active/valid when the element it is applied to has display: inline-block or ìnline, which for example is useful if you want to align a bunch of images at their top border: You define them as inline-blocks and apply vertical-align: top to them

Here is an example:

.wrapper {  height: 250px;  border: 1px solid green;}
.wrapper>img {  display: inline-block;  vertical-align: top;}

<div class="wrapper">  <img src="https://placehold.it/120x40">  <img src="https://placehold.it/70x140">  <img src="https://placehold.it/80x60">  <img src="https://placehold.it/60x140"></div>

Does vertical align CSS property ever work?

because vertical-align only applies to inline level and table-cell elements. Both div and p are block level elements.

Applies to inline-level and table-cell elements. It also applies to
::first-letter and ::first-line.

MDN Source

With that in mind and using your example make your div a table and your p a table-cell

div {  height: 200px;  width: 500px;  background: red;  text-align: center;  display: table}p {  vertical-align: middle;  display: table-cell;}

<div>  <p>    yo bro  </p></div>

What are the conditions for vertical-align property of CSS to work?

Here is the Demo

CSS:

header {
    display: table;   /* Change this */

    height:20%;
    width:100%;
    background:rgba(0,0,0,0.9);
    color:#ccc;      
}

.header_content {       
    display:inline-block;
    background:rgba(255,255,255,0.4);

    display: table-cell;   /* Change this */

    vertical-align: middle;
}

You can read here for more information.

Why does vertical-align: text-top make element go down?

^{Ref: https://www.w3.org/TR/CSS2/visudet.html#line-height}

To understand this you need to first consider the definition of text-top:

The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.
In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above).

Then

text-top
Align the top of the box with the top of the parent's content area

So we need to identify the top of the box and the top of the parent's content area

If we add some decorations, we can easily identify them

body {
  font-family: sans-serif;
  font-size: 30px;
}

p {
  background: yellow;
  line-height: 50px;
  background:
   linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
   yellow;
}

p span {
  background:green;
}

.three {
  vertical-align: text-top;
  background:red;
}
  

.block {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: pink;
  border: 2px solid black;
  vertical-align: text-top;
}

<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>

Vertical-align aligns everything else except self

Is this expected behavior, a bug, or something else?

Yes it's the expected behavior.

Why is it that after applying vertical-align only to the <span>,
everything else got vertically aligned except the <span> content

It's not exactly like that, vertical-align will specify the alignment of the elements and based on that the browser will render the output. So all your element are getting aligned and not only the text like you think.

Let's start by removing the alignment

p {  background: yellow}
span {  display: inline-block;  height: 50px;  background: pink;}

<p>    Hello <span>What in the</span> World?</p>

Why does `vertical-align` property NOT work for a with `display:table-cell`?

2 issues :

Height

Your first-viewport has a height of 100%. When you work with % heights, know that the parent must have a height to so the % height of the children can be calculated.

In this case, you have to add html, body {height: 100%;}, which are the parents of first-viewport. (Honestly, it's not mandatory but you should do it as your div could have a zero height on some browsers.)

Background

Now, your <a> tags are actually taking the full height and are centered vertically, but you feel the opposite because of your background.

Blue zone is your a tag real position.

Now what you have to do is fixing your background position (since you're using the background property to display arrows).

a.previous-slide-arrow, a.next-slide-arrow {
    background-position: center;
}

This simple line above should fix it.

Why is the vertical align property not working?

The margin: 0vw; in your CSS *{ } is what is creating the issue. If you add margin: auto; to the navl and navr CSS you will be set. See Fiddle here

*{
    padding: 0vw;
    margin: 0vw;
}

nav{
    background-color: rgba(52, 52, 146, 0.829);
    display: inline-flex;
    justify-content: space-around;
    width: 100vw;
    height: 45px;
}

ul {
    display: inline-flex;
    list-style-type:none;
}

navl{
    border-color:red ;
    vertical-align: middle;
    margin: auto;
}
navr{
    vertical-align: middle;
    margin: auto;

}

How Does the Vertical-Align Property Work