세로 스팬 태그 정렬

Question

SPAN 태그 내에서 텍스트를 한 줄만 정렬하는 데 어려움이 있습니다. CSS와 HTML을 사용하여지도에 대한 범례를 만들려고합니다. 각 행에 대한 이미지와 텍스트 설명이있는 5 개의 행이 있습니다. 나는 행을 제어하기 위해 3 개의 SPAN을 사용하고 있는데 하나는 이미지 용이고 다른 하나는 텍스트 용입니다. 이것은 텍스트가 텍스트의 한 가운데에있을 때 맨 위, 텍스트가 이미지의 중간에 오도록 텍스트를 세로로 정렬 할 때만 실행됩니다.

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