+ 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 Respuestas
+ 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%;
}
¿Tienes a menudo preguntas como esta?
Aprende gratis de forma más eficaz
En tendencia hoy
Pig Latin
0 Votes
Please rate my code from 1 to 10
2 Votes
Square Roots
0 Votes
What's wrong with this?
2 Votes
Uuu
2 Votes
I’m new someone can help me
0 Votes
Recursion doubt
2 Votes