@OneDeus

Как исправить что бы при смене текста положение картинки оставалось на месте?

При смене текста меняется положение 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;
}

61e73b04be462643675920.png
61e73b18be0f2053808374.png
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
mrsexy
@mrsexy
Senior Pomidor
https://jsfiddle.net/z7ygna4L/ - пробуйте так.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы