The html:
<td>
<img>
text here
</td>
The css:
td img{
display: block;
float: left;
}
I want the picture to be floated to the left within the cell, and the text to be vertically-aligned to the middle. Without the picture there, the text is automatically vertically aligned to the middle, but with the picture there I can't seem to change the vertic开发者_如何学Cal alignment of the text.
Any ideas?
If you know the height of the image itself you can use the line-height property.
<td style="line-height: 50px;">
<img>Text text text
</td>
This should force the text to be displayed in the center of the line-height.
Try setting vertical-align:middle;
in the CSS for the img
. You may also want to consider setting that image as a background to that table cell, as you may have cross-browser issues regardless of how you position everything (setting the image as a background would avoid this).
Using line-height to vertically align text next to an image within a table cell onl*y works if you have one line of text. The next line of text will be (as in the example above) 50px below the first line of text.*
Setting the *image as backgroun*d also does not work unless you set a margin within the cell = to the width of the image on whichever side you want the image to align.
精彩评论