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

Use vertical-align: sub .

 .verified span{ vertical-align:sub; }

 <p class="verified"><span>*</span> verified</p>

Answer 2

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 (∗) .

Answer 3

试试这个： http : //jsfiddle.net/yce0mbux/1/

<span style="line-height:30px;vertical-align:middle" >*</span><label>Some text</label>

Answer 4

use pseudo element before

 .imp { display: block; line-height: 26px; } .imp:before { content: '*'; display: inline-block; vertical-align: middle; }

 <div class="imp">Mandatory</div>

Answer 5

If you don't have a nested child element, add one like so:

<div>
    <span id="one">
        *
    </span>
     some text
</div>

You need to define both height and line-height to achieve the effect that you want.

#one{
    vertical-align: middle;
    display: inline-block;
    line-height: 20px;
    height: 15px;
}

Example

Answer 6

Try this method:

.your-label {
 display: inline-table;
 vertical-align: middle;
 position: relative;
 padding-left: 15px; /* Adjust as needed to make space for the asterisks */
 /* You need a given dimension to prevent overlap */
      }


.your-label:before {
 position: absolute;
 content: '*';
 left: 0; /* Adjust as needed */
 top: 3px; /* Adjust as needed */
}

See working example here

Note: Inserting as shown above, gives you the independence to position as needed.

Answer 7

Use relative instead of absolute to get a better alignment.

.required::before {
    position: relative;
    content: '*';
    left: 0;
    top: 0;
   }