How can I vertically center text on 1 line
? The text may change, so I want a generic solution.
Example here: http://jsfiddle.net/rfECj/
HTML:
<table>
<tr>
<td>
<img src="img.png"/>
text on 2 lines text on 2 lines text on 2 lines
</td>
<td>
<img src="img.png"/>
text on 2 lines text on 2 lines text on 2 lines
</td>
<td>
<img src="img.png"/>
text on 1 line
</td>
</tr>
</table>
CSS:
table img {
margin: 4px 6px 0 6px;
float: left;
}
table tr td {
width: 180px;
}
The only solution that comes in mind is use more TDs, one for the image, one for the text.
anything wrong with using vertical-align: middle;
?
Hard to tell if this is what you want from the question, but you could use vertical-align
, which works on td
s.
table tr td {
width: 180px;
border:1px solid red; //just to see it better
vertical-align:middle; // add this
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.