对齐表格内的文本答案

【问题标题】：Align text inside table对齐表格内的文本
【发布时间】：2016-07-01 21:43:16
【问题描述】：

我目前有一个包含 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____

到

哦----

【问题讨论】：

你试过行高属性吗？
我试过了，文字不动
你能创建一个演示吗？

标签： html css vertical-alignment css-tables

【解决方案1】：

.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;
  
   

}

试试这个

【讨论】：

【解决方案2】：

将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

【讨论】：

5 分钟后我可以接受答案，谢谢！发挥了魅力！