Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS sprites in background and vertical alignment

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #146352
    tomasz86
    Participant

    I want to display country flags next to text but also need to have them centred vertically. In case of a single image I could use

    background: url(image.png) no-repeat 100% 50%;
    

    but it’s impossible when using sprites.

    I’ve managed to somewhat do it with a combination of display: inline-block and line-height but I’m not sure if it’s really a good solution.

    Here’s the code: http://codepen.io/tomasz86/pen/tlvsy

    I’ll be very thankful for any comments or tips.

    #255805
    mimidou_64
    Participant

    Hi,
    I know this post it’s old.
    But I have the same problem do you find solution ?

    Thanks

    #255806
    Beverleyh
    Participant

    Some good icon alignment tips can be found here https://css-tricks.com/tips-aligning-icons-text/

    But for specific help, we’d need to see your code and sprite sample. You can provide a basic demo for us in CodePen.

    #255807
    mimidou_64
    Participant

    Thank-you for your help.
    I have create a jsfiddle : https://jsfiddle.net/mimidou_64/dskzd3yL/

    The image green need to be center

    The green icon should be centered in height relative to the content of the text.

    I trie “vertical-align:middle” but it’s don’t work for the background-size.
    And I can’t use background-position : since I use sprite image

    #255808
    Paulie_D
    Member

    Something like this.

    Flexbox is my preferred solution. If you use CSS Table properties you can’t set the height of the pseudo-element.

    https://codepen.io/Paulie-D/pen/jwqjgz

    #255809
    mimidou_64
    Participant

    Thanks for this solution it works perfectly under chrome but unfortunately not in Internet Explorer 11. Have you an idea ?
    The icon is not visible. My site must be IE11 compliant.

    I don’t know too much display: flex.
    I will have to look at this in detail

    #255810
    Paulie_D
    Member

    Well display:inline-block works as well if you are using fixed widths.

    https://codepen.io/Paulie-D/pen/MoyNvx

    #255811
    mimidou_64
    Participant

    Great !!!
    Thank you very much, it’s been a while since I tried all the solutions without success.

    Thanks for your reactivity

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.