centering spans

[jimmyshoes]

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

<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

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

 

[cygmorg]

Something like this maybe?

HTML:

<div>
<span class="span1"><img src="pixel.gif"></span>
<span class="span2">Text</span>
</div>

CSS:

<style type="text/css">
        div {
                text-align:             center;
                border:                 1px solid #000000;
        }
        img {
                width:                  10px;
                height:                 10px;
        }
        .span1 {
                background-image:       url(1.jpg);

        }
        .span2 {
                font-size:              24px;
        }
</style>

linux is the way forward!

Gareth

 

[jimmyshoes]

Thanks for your suggestion. However, this centers my 2 spans horizontally in the div , whereas I am trying to center them vertically.
To demonstrate, this gives me

------------------------------------------
span2
span1
------------------------------------------

whereas I am trying to get

------------------------------------------

span1 span2

------------------------------------------

 

[traingamer]

Replacing the first span with a floated div and a defined size is closer to what you're looking for. I've added borders for you to see what's happening and top and bottom padding for positioning. I'm somewhat confused as to why you've got an image in a span with a background that isn't going to be visible, but...

<div style="border:1px solid #000000; ">
<div style="background-image:url('1.jpg'); border: 1px solid red;   width:10px; height: 10px; float: left; padding: 7px 0;"><img src="pixel.gif" style="width:10px; height:10px;"></div>
<span style="font-size:24px; border: 1px solid green;"">Text</span>
</div>

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[Vragabond]

traingamer, it's a crude image protection thing, where saving the image saves a blank gif instead of the real picture. Very easy to outmaneuver, but it seems to be quite popular (it's used on flickr).

The best way of vertically centering inline elements is by adding line-height to the parent object. However, I am not sure how your page works, since it seems the parent object will always be the size of gif image and the text below it (for the previous to work, parent element must have some sort of height envisioned.

If the gif is always 10x10 and if span is always smaller than gif, then giving the img tag vertical-align: middle; should work as well.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jimmyshoes]

Thanks for your suggestions.

I have tried line-height in Firefox, which is working well for the text, but the image is not centering vertically

<div style="border:1px solid #000000;line-height:40px;">
<span style="background-image:url('1.jpg');">
<img src="pixel.gif" style="vertical-align:middle;width:10px;height:10px">
</span>
<span style="font-size:24px"">Text</span>
</div>

 

[Vragabond]

Since it is not so easy to recreate the same layout as you have without all these images, would it be possible for you to put an example page somewhere on the net so we can see it for ourselves? It shouldn't be too difficult to figure it out, if we can see it.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jimmyshoes]

Thanks for your reply. Actually I'm just testing the concept of how to centre 2 spans vertically (where one span contains a background image) so this is all the code I have. I am trying to achieve this layout

--------------------



Img Span Text span



---------------------