vertical-align middle not working

 https://christopheraue.net/design/why-vertical-align-is-not-working

 

  1 <style>
  2 .container {
  3     width: 100%;
  4     text-align: center;
  5     border: 1px solid rgba(0,0,0,1);
  6     color: #666666;
  7     background-color: rgba(255,255,0,1);
  8     font-weight: bold;
  9 }
 10     .middle {vertical-align: middle; }
 11 </style>
 12
 13 <div class="container">
 14     <br>
 15     <span class="tall-bar middle"></span>
 16     <span class="top"></span>
 17     <span class="middle">Year2021/2022 Volunteer Recognition Event</span>
 18     <span class="bottom"></span>
 19     <br>
 20     <br>
 21 </div>