Jump to content
Search Community

centre align svgs

Buster test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have searched many posts but nothing has worked for me. Getting used to CSS for the first time and I find it frustrating that I have to fiddle the left margin for everything until my graphics look centred. Surely there is an easy way to just horizontal align an object to the stage?

This is a 300x250 px banner. What so I need to add?

#mySvg {
	
	position: absolute;
        background: url(graphic.svg) no-repeat 0px 0px;
	width: 131px;
	height: 7px;
	top: 158px;
	left:85px ;

}
Link to comment
Share on other sites

It's actually just a small graphic (137 X 7) that sit's on a 300x250 canvas. So these methods don't seem to work for positioning individual graphics. 

This does beg another question... I took this code from a tutorial I was using which used a sprite sheet. I wanted to use individual graphics but I kept the: 

background: url(graphic.svg) no-repeat 0px 0px;

...even though it is not actually a background. So all my images are lined with that line of code. What would be there proper line of code to use to link separate assets if not using a sprite sheet.

Link to comment
Share on other sites

It's actually just a small graphic (137 X 7) that sit's on a 300x250 canvas. So these methods don't seem to work for positioning individual graphics. 

This does beg another question... I took this code from a tutorial I was using which used a sprite sheet. I wanted to use individual graphics but I kept the: 

background: url(graphic.svg) no-repeat 0px 0px;

...even though it is not actually a background. So all my images are lined with that line of code. What would be there proper line of code to use to link separate assets if not using a sprite sheet.

This should help you with centering anything you need to center: https://css-tricks.com/centering-css-complete-guide/

 

This should help you with using SVG in general: https://css-tricks.com/using-svg/

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

I have a helper class that I reuse (derived from that css-tricks.com link in the previous reply) that looks kind of like this: 

.center{
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

I also have one that centers only horizontally and one that centers only vertically, and I apply them to my divs (or svgs) as needed.

Link to comment
Share on other sites

I have a helper class that I reuse (derived from that css-tricks.com link in the previous reply) that looks kind of like this: 

.center{
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

I also have one that centers only horizontally and one that centers only vertically, and I apply them to my divs (or svgs) as needed.

The position would also need to be set to absolute for that one to work, and the element being centered also needs to have a defined width and height.

Link to comment
Share on other sites

Butting in...

 

If we're talking about absolutely positioned elements, a handy way of center aligning is using percentages and negative transforms. The bellow will center the element to the middle of the parent, both vertically and horizontally.

.center {
 position: absolute;
 left: 50%;
 top: 50%
 transform: translate(-50%, -50%);
}

The good thing about doing it this way is that, by using a negative transform, you are effectively moving the proverbial "pivot point" of the element. So you could then overwrite the top position and center align a bunch of elements on top of each other. Make sure the parent container has a position: relative rule and you are good to go. Unlike the previous suggestion, this way the positioned element does not need to have a defined width or height.

 

See the Pen jrMJGg by dipscom (@dipscom) on CodePen

  • Like 3
Link to comment
Share on other sites

It's actually just a small graphic (137 X 7) that sit's on a 300x250 canvas. So these methods don't seem to work for positioning individual graphics. 

This does beg another question... I took this code from a tutorial I was using which used a sprite sheet. I wanted to use individual graphics but I kept the: 

background: url(graphic.svg) no-repeat 0px 0px;

...even though it is not actually a background. So all my images are lined with that line of code. What would be there proper line of code to use to link separate assets if not using a sprite sheet.

 

One thought. Are you trying to center align a graphic inside a canvas? Or a graphic that is on top of a canvas?

 

All the CSS we have been suggesting will not work for elements inside canvas. They will only work on DOM elements.

  • Like 2
Link to comment
Share on other sites

One thought. Are you trying to center align a graphic inside a canvas? Or a graphic that is on top of a canvas?

 

All the CSS we have been suggesting will not work for elements inside canvas. They will only work on DOM elements.

I think by "canvas" they just meant their container div/work area (like the canvas in Photoshop), not that they're actually working with the canvas element.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...