Allineare verticalmente un asterisco (*) con un'etichetta in un modulo HTML

Question

Nel mio modulo, ho messo un asterisco (*) dietro un'etichetta per contrassegnarlo come importante.

Il problema è che è allineato verticalmente come posizione superiore per impostazione predefinita. Spero che ci sia un modo attraverso il quale posso allineare verticalmente come mezzo.

Questo è come appare:

Avviso del * da top allineati.

Ho provato questo, ma non funziona

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

Answer 1

Usa vertical-align: sub

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

.verified span{ 
    vertical-align:sub; 
} 

working demo

Answer 2

provare questo metodo:

.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

Nota: Inserimento come mostrato sopra, ti dà l'indipendenza posizionare secondo necessità.

Answer 3

Prova questo: http://jsfiddle.net/yce0mbux/1/

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

Answer 4

Se non si dispone di un elemento figlio nidificato, aggiungerne uno in questo modo:

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

È necessario definire sia height e line-height per ottenere l'effetto desiderato.

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

Example

Answer 5

uso pseudo elemento before

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

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

Answer 6

Procedimento vertical-align: sub espande anche l'altezza del contenitore. Poiché hai anche taggato html per la domanda, puoi usare l'entità html per l'asterisco medio nativo.

∗ 

Demo:

Ecco l'asterisco predefinito (*). Ecco l'asterisco centrale (& lowast;).