+ 3

How to put this in the center?

How to put this SVG star in the middle of the page, in CSS? https://code.sololearn.com/Wqq6mW5muNjM/?ref=app

10th Jun 2017, 10:16 PM
Илья Карпенко UA
Илья Карпенко UA - avatar
3 odpowiedzi
+ 5
Make SVG width to be 38.042px cos this is the largest path width of the drawing, now you can use <center> tag to place your svg in the center, get the device innerHeight and let it help you center your svg horizontally but make sure the svg height is 32.361px or so. eg: <!DOCTYPE html> <html> <head> <title>Page Title</title> <script> window.onload = function() { var _w = window.innerHeight; document.getElementById("_svg").style.marginTop= (_w/2)-32.361 ; }; </script> </head> <body><center> <svg width=38.042px height=40px id="_svg" fill="gold"><path d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000" /> </svg></center> </body> </html> mine https://code.sololearn.com/WjoT5CP9x3rU/?ref=app
10th Jun 2017, 11:36 PM
Nomeh Uchenna Gabriel
Nomeh Uchenna Gabriel - avatar
+ 4
Replace your HTML with this: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <svg width=210 height=210 ><path d="M 100.000 120.000 L 123.511 132.361 L 119.021 106.180 L 138.042 88.361 L 111.756 84.180 L 100.000 60.000 L 89.756 84.180 L 62.042 88.361 L 81.021 106.180 L 77.511 132.361 L 100.000 120.000" /> </svg> </body> </html> Replace your CSS with this: body{ background-color:grey; text-align:center; } svg{ background-color:white; } You can remove the background color of the body if you want. There was more wrong with your code than just centering it. You need to learn more about SVG.
10th Jun 2017, 11:06 PM
Ghauth Christians
Ghauth Christians - avatar
+ 1
try svg { position:absolute; top:50%; left:50%; }
10th Jun 2017, 10:26 PM
ChaoticDawg
ChaoticDawg - avatar