Вертикальный выровнять: после элемента

Question

Я пробовал различные ответы here, но не повезло.

мне нужно вертикальной выравнивать после элемента:

content: ""; 
width: 30px; 
height: 15px; 
background: transparent url('/img/test.png') no-repeat; 
float: right; 
border: 1px solid red; 

Это не работает:

vertical-align: middle; 

также не:

vertical-align: -50%; 

Answer 1

Из этих ответов, связанных с, то vertical-align:inherit; на элементе работал для меня, когда я установил родительский элемент в vertical-align:top;, ничего e Кажется, я работал для меня.

Answer 2

Вы можете использовать line-height на родительский элемент и display:inline-block на псевдо :after

.box { 
    width: 100px; 
    height: 100px; 
    background: #CCC; 
    line-height: 100px; 
    text-align: center; 
} 
.box:after { 
    content: ""; 
    width: 30px; 
    height: 15px; 
    background: transparent; 
    border: 1px solid red; 
    display: inline-block; 
} 

DEMO: https://jsfiddle.net/tianes/zhwL3rrq/