Vertically align an asterisk (*) with a label in an HTML Form

Question

On my form, I put an asterisk (*) behind a label to mark it as important.

The problem is that it vertically aligned as top position by default. I am hoping that there's some way through which I can vertically align it as middle.

This is how it looks:

Notice the * to be top aligned.

I tried this, but it doesn't work

.imp {
        display: inline-table;
        vertical-align: middle;
}

Answer 1

The vertical-align: sub method also expands the container height. Since you also tagged html for the question, you can use the html entity for native middle asterisk.

∗

Demo:

Here is the default asterisk (*). Here is the middle asterisk (∗).