CODEWITHSUNDEEP
htmlcssreactjssvg
chrisrhyno2003
chrisrhyno2003

Reputation: 4197

Svg inside not aligning to center

I am using react and on render, I am returning an SVG within a div. My code looks like this:

render() {
    return(
        <div class="myClass">
          <svg> ... </svg>
        </div>
    );
}

My CSS class looks like:

.myClass{
  margin-left: auto;
  margin-right:auto;
}

It works perfectly fine in Chrome and firefox, its IE where the svg is displayed to the left and not center aligned. Does IE need some more CSS properties to be added?

Upvotes: 3

Views: 5144

Answers (1)

chrisrhyno2003
chrisrhyno2003

Reputation: 4197

Solved it. Weirdly, IE treats the SVG like text. I added a center align to my CSS class and it worked.

My solution was:

.myClass{
  margin-left: auto;
  margin-right:auto;
  text-align: center;
}

Upvotes: 3

Related Questions