- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
Hi,
I know this post it’s old.
But I have the same problem do you find solution ?
Thanks
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.
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
Something like this.
Flexbox is my preferred solution. If you use CSS Table properties you can’t set the height of the pseudo-element.
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
Well display:inline-block
works as well if you are using fixed widths.
Great !!!
Thank you very much, it’s been a while since I tried all the solutions without success.
Thanks for your reactivity