Question

我很难在只有一行的SPAN标记内对齐文本。我正在尝试使用CSS和HTML为地图创建图例。有5行，每行有一个图像和一个文本描述。我正在使用3个SPAN＆＃39; s来控制行，一个用于图像，另一个用于文本。这很有效 - 当文本只有一行时，它会垂直对齐到顶部，我希望文本位于图像的中间。

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 size标签并将它们放在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;
}

垂直对齐跨度标记

2 个答案: