0

I have icons. Problem is they do not vertically align to the middle like everything else (text, input). My html structure is something like this:

<div class="i_contain_things">
  <div class="i_float_left"><checkbox/></div>some text
  <div class="i_float_right">
    <span class="sprite icn1">my sprite</span>
    <span class="sprite icn2">my sprite</span>
  </div>
</div>

.i_contain_things
{
clear:both;
margin-bottom:10px;
vertical-align:middle;
}

.i_float_left
{
padding:0 3px 0 3px;
float:left;
display:inline-block;
}

.i_float_right
{
padding:0 3px 0 3px;
float:right;
display:inline-block;
vertical-align:middle;
}

.sprite
{
display:inline-block;
background: url(../img/icn_sprite_1.png);
width: 16px;
height: 16px;
vertical-align: middle;
}
.icn1{background-position:0,0}
.icn2{background-position:0,16px}

my sprite is always aligned to the bottom, while the checkbox and text are in the middle.

6
  • 1
    Have any actual markup to test? Basically I would just suggest adding a bit of a bot margin to the image, or go the line-height css vertical align technique. brunildo.org/test/va_lineheight.html
    – Loktar
    Jan 7, 2011 at 17:03
  • 3
    Can you use regular html syntax? It'll make it easier to look at. Also can you include some css?
    – JakeParis
    Jan 7, 2011 at 17:04
  • line-height did nothing, I cannot add a bottom margin, as the height is variable.
    – aepheus
    Jan 7, 2011 at 17:20
  • 1
    Aepheus, please highlight your code and click the "code" button {}
    – JakeParis
    Jan 7, 2011 at 17:28
  • There is no background-position in this code sample. Why are you referring to this as CSS Sprites? May 4, 2012 at 2:03

2 Answers 2

1

This is not going to work, a span is an inline element so as soon as you remove the text, it will collapse; height and width won´t do anything.

I´m not sure what you want to achieve exactly, but it seems to me that you need to put your sprite as a background to one of the elements you already have (like .i_contain_things), and not put it in a separate element.

If you do need to put it in a separate element, you need to make sure it´s a block level element (for example a div or a span that's set to display:block). That element needs to be positioned where you want it.

5
  • Not putting it in a separate element makes it impossible to use css sprites. May 4, 2012 at 2:03
  • @Nick - this is untrue, the example would act as a sprite if it had display:block; you could then define other sprite elements using the same background and background position. no addition elements are required.
    – aepheus
    May 7, 2012 at 22:58
  • We must have a different definition of CSS Sprites. I thought CSS Sprites were a technique where you place multiple small images into a single larger image and then select the one you want using background-position. May 7, 2012 at 23:04
  • @Nick Retallack It's a long time ago, but I only wrote that because in the original example, there was no need for a separate element as it was already contained in another element that did not have any additional content AND was a block element already.
    – jeroen
    May 7, 2012 at 23:14
  • Yeah, sorry. It's the question that is at fault here, not the answers. I already edited the question anyway. Sorry for commenting on you guys. May 7, 2012 at 23:19
0

You need to specify the background-position property. Like so:

sprite { background: url(../img/icn_sprite_1.png) 50% 50% no-repeat; 

Where the first number is axis-x and the second number is axis-y You can use percentages, pixels, or keywords (right, top, center) to declare the position of the background image.

http://www.w3schools.com/css/css_background.asp

5
  • backgound-position takes center as keyword, not middle
    – DanMan
    Jan 7, 2011 at 17:42
  • 1
    You need to use background position to do css sprites. May 4, 2012 at 2:04
  • @Nick, of course. In this answer I'm just using "Background" as a shorthand declaration. The 50% 50% refers to the background-property.
    – JakeParis
    May 4, 2012 at 13:09
  • That's not what I mean. What I mean is, if you want to do sprites properly, you already need to use the background position to select the sprite. You can't then also use the background position to position the background. However, the person asking the question doesn't seem to know what CSS sprites are either, so this whole thread is confusing me. May 4, 2012 at 20:36
  • Sorry for adding all these comments. I'll just edit the original question instead of complaining about the answers. May 4, 2012 at 20:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.