Vertical align center does not work in Label


I am seeing where this is a challenge on NS. I am not sure if someone has a fix for this but I have not been able to get it to work. The text is horizontally aligned to center but not vertically. Is there a fix for this?

   <Label id="prizeText" class="h22 text-center" text="{{ prizeText }}" textWrap="true" verticalAlignment="middle"></Label>

horizontal-align: center;
vertical-align: middle;//vertical-align: center does not work either.
font-weight: bold;
color: white;
width: 90%;
height: 45%;
background-color: red;
font-size: 20;
padding: 5;
display: inline-block;


verticalAlignment needs to be set to center not middle, that will fix it.


center does not work either


Does anyone have a working sample code? This seems so simple yet so difficult to achieve.


Using a little CSS trick I have been able to get anything to vertically and or horizontally align.

width: 50%; //any with you require

    .icon-text {
        horizontal-align: center;//this always work
       // vertical-align: center; this does not work
        margin-top: 22%; //but this does work, change as needed and use percentage so it will change according to screen size.