fix(tabs): improved vertical alignment of tab label (#5771)

Uses inline flex to align the tab label content. This is more reliable and more flexible. It also allows us to have multi-line text in the tabs, if we decide that we want to support it.

Author: crisbeto

src/lib/tabs/_tabs-common.scss

@@ -1,19 +1,21 @@
 @import '../core/style/variables';
 
 $mat-tab-bar-height: 48px !default;
-
 $mat-tab-animation-duration: 500ms !default;
 
 // Mixin styles for labels that are contained within the tab header.
 @mixin tab-label {
-  line-height: $mat-tab-bar-height;
   height: $mat-tab-bar-height;
   padding: 0 12px;
   cursor: pointer;
   box-sizing: border-box;
   opacity: 0.6;
   min-width: 160px;
   text-align: center;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
 
   &:focus {
     outline: none;

src/lib/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -13,7 +13,6 @@
 // Wraps each link in the header
 .mat-tab-link {
   @include tab-label;
-  display: inline-block;
   vertical-align: top;
   text-decoration: none;  // Removes anchor underline styling
   position: relative;