How to vertically align an svg?

HTML & CSS
1

How/where can I add code to vertically align this svg:

	.tri {
	    stroke: #000000;
	    stroke-dasharray: 240;
	    stroke-dashoffset: 480;
	    transform: translateY( 0 );
	    transition: all 0.7s ease-in-out;
	   }

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="45" height="40" viewBox="0 0 190 190">
<polygon class="tri" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon></svg>
2

Well, you have not actually stated where. ::rofl:

Nevertheless, here is just one of many possible solutions…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    margin: 0;
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
div {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
 }
.tri {
    stroke: #000;
    stroke-dasharray: 240;
    stroke-dashoffset: 480;
    transform: translateY( 0 );
    transition: all 0.7s ease-in-out;
 }    
</style>

</head>
<body>

<div>
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    x="0" y="0" 
    width="45" 
    height="40" v
    viewBox="0 0 190 190">
  <polygon class="tri" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" 
    points="73.5,62.5 148.5,105.8 73.5,149.1">
  </polygon>
</svg>
</div>

</body>
</html>

coothead

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.