Vertikal align-Symbol mit mehrzeiligen Text

Question

ich folgende CSS haben:

.dropdown section h4::after { 
    content: url(img/plus-symbol.svg); 
    right: 0; 
    vertical-align: middle; 
    position: absolute; 
    display: inline-block; 
} 

Kann jemand geben Sie mir einen kleinen Hinweis auf wie „+“ Symbol der Mitte in den letzten Punkt zu bringen?

Answer 1

können Sie verwenden:

top: 50%; 
transform: translateY(-50%); 

ul { 
 
    width: 100px; 
 
    padding-left: 0; 
 
} 
 

 
li { 
 
    position: relative; 
 
    list-style: none; 
 
    border: 1px solid; 
 
    padding-right: 20px; 
 
    margin-bottom: 10px; 
 
} 
 

 
li:after { 
 
    content: "+"; 
 
    position: absolute; 
 
    right: 5px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<ul> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Lorem ipsum dolor sit amet</li> 
 
</ul>

Answer 2

.dropdown section h4 { 
    position: relative; 
} 

.dropdown section h4::after { 
    content: url(img/plus-symbol.svg); 
    right: 0; 
    vertical-align: middle; 
    position: absolute; 
    display: block; 
    top: 50%; 
    transform: translateY(-50%) 
} 

Weitere Informationen browser compatibility of transform über Die transform: translate() Eigenschaft erlaubt Sie bewegen ein Element relativ zu seiner Höhe oder Breite. Also, wenn du hast + icon hat eine Höhe von 40px, transform: translateY (-50%) wird dich Element von 20px nach oben bewegen.

Sie können auch display: table-cell verwenden, um vertical-align: middle zu verwenden, aber es hängt möglicherweise von Ihrer HTML-Struktur ab. :)

Eine andere Lösung ist die Verwendung von flexbox.