垂直對齊跨度標記

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