I have an SVG that I am trying to center in a div. The div has a width or 900px. The SVG has a width of 400px. The SVG has its margin-left and margin-right set to auto. Doesn't work, it just acts as if the left margin is 0 (default).
Anyone know my error?
This question is related to
css
layout
svg
positioning
margin
Put your code in between this div
if you are using bootstrap:
<div class="text-center ">
<i class="fa fa-twitter" style="font-size:36px "></i>
<i class="fa fa-pinterest" style="font-size:36px"></i>
<i class="fa fa-dribbble" style="font-size:36px"></i>
<i class="fa fa-instagram" style="font-size:36px"></i>
</div>
Put this two lines in style.css
In your specified div
class.
display: block;
margin: auto;
and then try to run it, you will be able to see that .svg aligned in the center.
Having read above that svg is inline by default, I just added the following to the div:
<div style="text-align:center;">
and it did the trick for me.
Purists may not like it (it’s an image, not text) but in my opinion HTML and CSS screwed up over centring, so I think it’s justified.
I had to use
display: inline-block;
For me, the fix was to add margin: 0 auto;
onto the element containing the <svg>
.
Like this:
<div style="margin: 0 auto">
<svg ...</svg>
</div>
Flexbox is another approach: add
.container {
display: flex;
justify-content: center;
}
_x000D_
And add the .container
class to the div which contains your svg.
Above answers did not work for me.
Adding the attribute preserveAspectRatio="xMidYMin"
to the <svg>
tag did the trick though. The viewBox
attribute needs to be specified for this to work as well.
Source: Mozilla developer network
You can also do this:
<center>
<div style="width: 40px; height: 40px;">
<svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
<use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon">
<svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%">
<path
d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
/>
</svg>
</use>
</svg>
</div>
</center>
Answers above look incomplete as they are talking from css point of view only.
positioning of svg within viewport is affected by two svg attributes
Follow this link from codepen for detailed description
<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">
None of these answers worked for me. This is how I did it.
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
make sure your css reads:
margin: 0 auto;
Even though you're saying you have the left and right set to auto, you may be placing an error. Of course we wouldn't know though because you did not show us any code.
Source: Stackoverflow.com