I'm looking for CSS solution to put an svg country flag in a circular div container.
To do so, my plan would be to set height equal to width and border-radius: 100%; for the container, so that it becomes a circle, and then to set overflow: hidden; to hide whatever part of the svg child overflows the circle.
The missing bit is that I should center the child svg horizontally with resepct to the parent. How can I do that? Are probably flex box or grid layout the way to go?
If it is important, I plan then to make the circle a clickable element (there would be several of them and they'd behave like alternative radio buttons, functionally).
Some related questions/answers which I wasn't able to adapt to my case:
- When child element is bigger than the parent, how to place the child centered above/below the parent element (plus rotate it)?
- CSS - Stretch a child div to the full height of its parent that is overflowed
- How to vertically center content of child divs inside parent div in a fluid layout
- How to center a child element in CSS, even if it is larger than the parent?
(The two should also be centered vertically, but since the flags are generally wider than they are high, the container and the image can share the same height, e.g. the child can set height: inherit;.)
.country-flag {
height: 3em;
width: 3em;
border-radius: 100%;
position: relative;
overflow: hidden;
}
.country-flag > svg {
width: auto;
height: 3em;
position: absolute;
left: -27%; /* but this is not accurate! Ideally it is `-1 * (width - height)/2` */
}<div class="country-flag">
<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="1000" viewBox="0 0 3 2">
<rect width="3" height="2" fill="#009246"/>
<rect width="2" height="2" x="1" fill="#fff"/>
<rect width="1" height="2" x="2" fill="#ce2b37"/>
</svg>
</div>