CODEWITHSUNDEEP
htmlcssvertical-alignment
BretW
BretW

Reputation: 199

Vertical Align a Span Tag

I am having difficulty aligning text within a SPAN tag that is only one line. I am trying to create a legend for a map using CSS and HTML. There are 5 rows, with an image and a text description for each row. I am making use of 3 SPAN's - 1 to control the row, one for the image and another for the text. This is working great - execpt when the text is only one line as it vertically aligns it to the top, where i would like the text to be in the middle of the image.

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

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

Any help or guidance is great appreciated.

Upvotes: 1

Views: 682

Answers (2)

Lei-Lonnie
Lei-Lonnie

Reputation: 784

This works using your same span structure: http://jsfiddle.net/DLvya/1/

note: you had height:"20" in your img tag, this is improper syntax, I removed the img size tags and put them in the 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;

}

Upvotes: 1

JRulle
JRulle

Reputation: 7568

Try this (much simplified version): 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;
}

Upvotes: 0

Related Questions