Vertical align center does not work in Label


#1

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>

.h22{
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;
}


#2

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


#3

center does not work either


#4

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


#5

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


//css
.menu-item{
width: 50%; //any with you require
background-color:red

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