При смене текста меняется положение svg картинки подскажите пожалуйста как сделать так что бы картинка оставалась на прежнем месте?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';connect-src 'self' https://oauth2.googleapis.com/tokeninfo http://localhost:8080/ https://oauth2.googleapis.com/token https://people.googleapis.com/v1/people/me; style-src 'self' 'unsafe-inline'; img-src 'self' data:">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/initStyle.css">
</head>
<body>
<div class="container" style="flex-direction: column;">
<!-- <div id="content"> -->
<div class="column-element img-container">
<img id="init-img" class="undraggable" src="../assets/mainIcon.svg">
</div>
<h3 id="init-text" class="column-element">Welcome!</h3>
<div id="init-progress" class="progress-bar">
<div class="progress-bar-value"></div>
</div>
<!-- </div> -->
<div id="grad-background"></div>
</div>
<script src="../init/init_ui.js"></script>
</body>
</html>
html {
overflow: hidden;
}
.container {
background: #161616;
}
#init-img {
display: inline-block;
margin-top: 10%;
}
#init-progress {
position: fixed;
margin-left: 10%;
margin-right: 10%;
bottom: 10%;
left: 0;
right: 0;
}
#content {
position: relative;
z-index: 100;
align-content: center;
justify-content: center;
}
#grad-background {
position: fixed;
left: 25%;
top: 25%;
width: 50%;
height: 50%;
background: linear-gradient(90deg, #FF6B00, #BB3834, #680D64);
filter: blur(50px);
border-radius: 60px;
z-index: -1;
}
#init-text {
margin-top: 15%;
align-content: center;
text-align: center;
margin-left: 10%;
margin-right: 10%;
font-size: 0.95em;
color: #E7E7E7;
}
.img-container {
flex-wrap: wrap;
}
Простой
