jimmyshoes
Programmer
The project I am working on renders images as spans with background images ( see code below )
I want to vertically centre 2 spans inside a box. One of the spans contains a background image with a dummy pixel (pixel.gif which is 1 pixel) and the other contains text. I have tried to centre with the following
However the image is not centering.
The only way I have managed to do it so far is with tables, but I would like a css solution
I want to vertically centre 2 spans inside a box. One of the spans contains a background image with a dummy pixel (pixel.gif which is 1 pixel) and the other contains text. I have tried to centre with the following
Code:
<div style="border:1px solid #000000">
<span style="vertical-align:middle;background-image:url('1.jpg')"><img src="pixel.gif" style="width:10px;height:10px"></span>
<span style="font-size:24px"">Text</span>
</div>
However the image is not centering.
The only way I have managed to do it so far is with tables, but I would like a css solution
Code:
<table style="border:1px solid #000000">
<tr valign="middle">
<td>
<span style="vertical-align:middle;background-image:url('1.jpg')"><img src="pixel.gif" style="width:10px;height:10px"></span>
</td>
<td>
<span style="font-size:24px"">Text</span>
</td>
</tr>
</table>