Menu
Can you help me to understand why my svg refuse to resize the height for helping me to center vertically in a div container ?
How can I process for align vertical svg in a container ? I seem to svg behaviour is not standard like div...
The main idea is that center horizontally AND vertically svg into a div.
I try this : https://jsfiddle.net/gbz7rp7u/1/#&togetherjs=0n9iL62pHv
<div id="svg-container"> <svg id="svg-1" height="50%" width="50%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle r="15" cx="350" cy="80"></circle> </svg> </div> #svg-container { background-color: red; } #svg-1 { margin: auto auto; display: block; height: 30%; } 
330
When the element to be centered is an inline element we use text-align center on its parent. When the element is a block level element we give it a width and set the left and right margins to a value of auto. With text-align: center in mind, most people look first to vertical-align in order to center things vertically.
Just add: . container { display: flex; justify-content: center; } And add the . container class to the div which contains your svg.
To center a div vertically on a page, you can use the CSS position property, top property, and transform property. Start by setting the position of the div to absolute so that it's taken out of the normal document flow. Then set the top property to 50%.
html, body { height: 100%; } #svg-container { display: flex; align-items: center; background-color: red; height: 100%; } #svg-1 { margin: 0 auto; display: block; }<div id="svg-container"> <svg id="svg-1" height="15px" width="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle r="15" cx="15" cy="15"></circle> </svg> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
