Html 垂直对齐跨度标记

我很难在只有一行的跨度标记内对齐文本。我正在尝试使用CSS和HTML为地图创建图例。共有5行，每行有一个图像和一个文本描述。我使用3个SPAN's-1来控制行，一个用于图像，另一个用于文本。当文本只有一条直线时，这是非常有效的，因为它垂直对齐到顶部，我希望文本位于图像中间。

CSS:

以及HTML：

<span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_x.png' width="30" height:"20"/></span><span class="legendText">500 year Floodplain</span></span>
                          <span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_a.png' width="30" height:"20"/></span><span class="legendText">100 year Floodplain, with known Base Flood Elevations</span></span>
                          <span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_ae.png' width="30" height:"20"/></span><span class="legendText">100 year Floodplain, with unknown Base Flood Elevations</span></span>
                          <span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_ao.png' width="30" height:"20"/></span><span class="legendText">100 year Floodplain, usually from sheet flow</span></span>
                          <span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_ve.png' width="30" height:"20"/></span><span class="legendText">100 year Floodplain with additional hazards due to storm-induced velocity wave action</span></span>

500年一遇漫滩
100年一遇的漫滩，具有已知的基本洪水高程
100年一遇漫滩，基本洪水高程未知
100年一遇的漫滩，通常来自席状流
100年一遇的漫滩，因风暴诱发的速度波作用而产生额外危害

非常感谢您的帮助或指导。

试试这个（非常简化的版本）：

500年一遇漫滩
100年一遇的漫滩，具有已知的基本洪水高程
100年一遇漫滩，基本洪水高程未知
100年一遇的漫滩，通常来自席状流
100年一遇的漫滩，因风暴诱发的速度波作用而产生额外危害
.传奇文本{
左侧填充：30px；
保证金：5px0；
背景：url（'http://placebacon.net/20/20")不重复;；
边框：1px纯黄色；
显示：块；
}

这使用相同的跨度结构：

注意：您的img标签中有高度：“20”，这是不正确的语法，我删除了img大小标签并将它们放在css中

HTML

---

感谢您的解决方案-似乎将显示设置为表行和表单元格就成功了。

<span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_x.png' width="30" height:"20"/></span><span class="legendText">500 year Floodplain</span></span>
                          <span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_a.png' width="30" height:"20"/></span><span class="legendText">100 year Floodplain, with known Base Flood Elevations</span></span>
                          <span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_ae.png' width="30" height:"20"/></span><span class="legendText">100 year Floodplain, with unknown Base Flood Elevations</span></span>
                          <span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_ao.png' width="30" height:"20"/></span><span class="legendText">100 year Floodplain, usually from sheet flow</span></span>
                          <span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_ve.png' width="30" height:"20"/></span><span class="legendText">100 year Floodplain with additional hazards due to storm-induced velocity wave action</span></span>

<span class="legendText">500 year Floodplain</span>
<span class="legendText">100 year Floodplain, with known Base Flood Elevations</span>
<span class="legendText">100 year Floodplain, with unknown Base Flood Elevations</span>
<span class="legendText">100 year Floodplain, usually from sheet flow</span>
<span class="legendText">100 year Floodplain with additional hazards due to storm-induced velocity wave action</span>

.legendText {
    padding-left: 30px;
    margin: 5px 0;
    background: url('http://placebacon.net/20/20') no-repeat;
    border: 1px solid yellow;
    display: block;
}

<span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_a.png' /></span><span class="legendText">100 year Floodplain, with known Base Flood Elevations</span></span>

<span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_a.png' />   </span><span class="legendText">100 year Floodplain, with known Base Flood Elevations</span></span>

<span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_ae.png' /></span><span class="legendText">100 year Floodplain, with unknown Base Flood Elevations</span></span>

<span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_ao.png' /></span><span class="legendText">100 year Floodplain, usually from sheet flow</span></span>

<span class="legendRow"><span class="legendSymbol"><img src='images/FEMA_Zone_ve.png' />
</span><span class="legendText">100 year Floodplain with additional hazards due to storm-induced velocity wave action</span></span>

.legendRow {
display:table-row;
}
img{
    height:30px;
    width:20px;
}
.legendSymbol {
float: left;
margin-right:10px;
}

.legendText {
height:30px;
text-indent:-0.2em;
display:table-cell;
vertical-align:middle;

}