垂直对齐跨度标记

Question

我很难在只有一行的SPAN标记内对齐文本。我正在尝试使用CSS和HTML为地图创建图例。有5行，每行有图片和文字说明。我正在使用3 SPAN的-1来控制行，一个用于图像，另一个用于文本。这是非常有效的 - 当文本只有一行时，将其垂直对齐到顶部，我希望文本位于图像中间。

CSS：

.legendRow { 
display: inline-block; 
vertical-align: middle; 
float: left; 
height: 25px; 
border: 1px solid green; 
margin-bottom: 5px; 
} 

.legendSymbol { 
float: left; 
margin-left: 5px; 
border: 1px solid red; 
display: block; 

} 

.legendText { 
display: inline-block; 
vertical-align: middle; 
margin-left: 50px; 
border: 1px solid yellow; 
display: block; 
text-indent:-0.2em; 
} 

和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> 

任何帮助或指导是很大的赞赏。

Answer 1

这个工程使用相同的跨度结构：http://jsfiddle.net/DLvya/1/

记：你有高度：在你的img标签 “20”，这是不合适的语法，我删除了img尺寸标签，并把它们放在CSS中。

HTML

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

CSS

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

} 

Answer 2

试试这个（大大简化版本）：JSFIDDLE

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