Выровнять текст внутри таблицы

Question

В настоящее время у меня есть список из 3 предметов. Каждая строка имеет небольшую иконку и текст внутри, все они прикреплены к нижней части каждой строки, однако мне нужен текст в центре, чтобы он был расположен по середине каждого значка. Вот мой код, который я пробовал изначально, чтобы использовать выравнивание с диапазоном, но idk.

<ul id="server-list"> 
    <li><img src="images/home-icon.png" class="item" alt="Server Name" /> <span id="s-name">Server Name</span></li> 
    <li><img src="images/screen-icon.png" class="item" alt="Game Mode" /> <span id="s-mode">Server Game Mode</span></li> 
    <li><img src="images/map-icon.png" class="item" alt="Map Name" /> <span id="s-map">Server Map Name</span></li> 
</ul> 

Вот мой CSS

.item { 
    margin: 8px; 
    height: auto; 
    width: 13%; 
} 
#server-list span { 
    font-family: 'Lato', sans-serif; 
    font-weight: 300; 
    text-align: left; 
    font-size: 18px; 
    padding-top: -10px; 
} 
#server-list li { 
    vertical-align: middle; 
    background: url("images/icon-bg.png") no-repeat; 
    background-size: 420px auto; 
    background-repeat: no-repeat; 
    list-style: none; 
    height: 85px; 
} 

мне нужно получить от

O____

в

O ----

Answer 1

Дайте display: inline-block; и vertical-align: middle; к обоим image и span

.item{ 
    margin:8px; 
    height: auto; 
    width: 13%; 
    vertical-align: middle; 
    display: inline-block; 
} 

#server-list span { 
    font-family: 'Lato', sans-serif; 
    font-weight: 300; 
    text-align: left; 
    font-size: 18px; 
    padding-top: -10px; 
    vertical-align: middle; 
    display: inline-block; 

} 

Fiddle

Answer 2

.item{ 
 
    margin:8px; 
 
    height: auto; 
 
    width: 13%; 
 
} 
 

 
#server-list span { 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: 300; 
 
    text-align: left; 
 
    font-size: 18px; 
 
    padding-top: -10px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-right: 30em; 
 
    width: 300em; 
 
    
 

 
} 
 

 
#server-list li { 
 
    vertical-align: middle; 
 
    display: table; 
 
    background: url("images/icon-bg.png") no-repeat; 
 
    background-size: 420px auto; 
 
    background-repeat: no-repeat; 
 
    list-style:none; 
 
    
 
    
 

 
}

Попробуйте это