Align an asterisk (*) vertically with a label in the form of HTML

Question

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

The problem is that by default it is vertically aligned as the top position. I hope there is a way in which I can vertically align it as an average.

Here's what it looks like:

Please note that * will be aligned in height.

I tried this but it does not work

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

Answer 1

Use vertical alignment: sub

 <div> <p class="verified"><span>*</span> verified </p> </div> .verified span{ vertical-align:sub; } 

working demonstration

Answer 2

Try the following: http://jsfiddle.net/yce0mbux/1/

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

Answer 3

If you don’t have a nested child, add it like this:

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

You need to define both height and line-height in order to achieve the desired effect.

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

Example

Answer 4

use pseudo before element

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

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

Answer 5

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 a working example here.

Note: The insert as shown above gives you independence for placement as needed.

Answer 6

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

 ∗ 

Demo:

Here is the default asterisk (*) . Here is the middle asterisk (& lowast;) .