New course! Every coder should learn Generative AI!
Try a free lesson+ 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
3 Answers
+ 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
+ 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.
+ 1
try
svg {
position:absolute;
top:50%;
left:50%;
}
Often have questions like this?
Learn more efficiently, for free:
Hot today
Questions
1 Votes
Code Playground
0 Votes
xampp
0 Votes
How to solve this
0 Votes
Sololearn keeps freezing.
0 Votes