+ 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 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
+ 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%;
}
Często masz takie pytania?
Ucz się bardziej efektywnie, za darmo:
Popularne dzisiaj
Someone can help me
2 Votes
What's wrong with this?
2 Votes
HTML community, HELP!!
2 Votes
X velocity
0 Votes
Files not linking in C++
0 Votes
I am a super beginner
0 Votes
Web Dev
0 Votes
How this program executes?
0 Votes