Авторизация прилипла к блоку, что делать?

Всем привет, ребята не могу понять в чем проблема, авторизация влиплась к началу блоку как сделать по центру её?
<div id="form_auth">
 <form action="auth.php" class="block glow" method="post" name="form_auth">
       <font color="#FFFFFF"><h3>Авторизация</h3>
       
                        <table>
          
                <tbody><tr>
                    <td> Email: </td>
                    <td>

                        <input type="email" name="email" required="required"><br>
                        <span id="valid_email_message" class="mesage_error"></span>
                    </td>
                </tr>
          
                <tr>
                    <td> Пароль: </td>
                    <td>
                        <input type="password" name="password" placeholder="минимум 6 символов" required="required"><br>
                        <span id="valid_password_message" class="mesage_error"></span>
                    </td>
                </tr>
                 
                <tr>
                    <td> Введите капчу: </td>
                    <td>
                        <p>
                            <img src="captcha.php" alt="Изображение капчи" /> <br>
                            <input type="text" name="captcha" placeholder="Проверочный код">
                        </p>
                    </td>
                </tr>
 
                <tr>
                    <td colspan="2">
                        <script src="/js/java.js"></script>
                        
                     <input type="checkbox" name="remember_me" checked="checked" /> Считывать мой IP
                      <!-- <input type="submit" name="btn_submit_auth" value="Войти"> -->
            <br><button type="submit" class="btn btn-dark" name="btn_submit_auth" value="Войти">Войти</button>

/*В ОТКРЫТОМ ДОСТУПЕ, МОЖЕТЕ БРАТЬ РАЗРЕШАЮ*/
/*
******
tg - DEADERROR
lolz - DEVELOPER
******

*/
.clear{
    clear: both;
}

.mesage_error{
    color: #cc0000;
}

.success_message{
    color: green;
    
}

.block_for_messages{
    text-align: center;
}

#header, #footer{
    border: 2px solid #000;
}

#header{
    padding-left: 10px;
}

#footer{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
}

td {
 color: #fff; 

}

h2 {
 color: #fff;
  margin-left: 15px;

 }
 h3 {
    color: #fff;
  margin-left: 15px;

    }

#header h2, #footer h2{
    text-align: center;
    margin: 0;
}

#auth_block{
    width: 290px;
    float: right;
    text-align: center;
}

#auth_block a{
    display: block;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    width: 110px;
    height: 30px;
    text-decoration: none;
}

#auth_block a:hover{
    text-decoration: center;

}
#link_register{
    float: left;
}

#link_auth, #link_logout{
    float: right;
}

#link_register a{
    background: #54d854;
}

#link_auth a, #link_logout a{
    background: #4e4eec;
    text-align: center;
}

/* Блок с формой регистрации */
#form_register, #form_auth{
    width: 300; /*block auth*/
    margin: 0 auto;
}


#authorized h2{
    text-align: center;
}

/*ДИЗАЙН AND ФОРМА*/

body {
  margin: 1;
  padding: 0;
  background-color: white;
}

.block {
  position: relative;
  margin: 15% auto 0;
  border-radius: 4px;
 width: 600px;
  height: 380px; 
   left: 100;
  background: linear-gradient(0deg, #131414, #131414); 
  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}

.glow::before, .glow::after {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: 4px;
  background: linear-gradient(45deg, #e6fb04, #ff6600, #00ff66, #00ffff, #ff00ff, #ff0099, #6e0dd0, #ff3300, #099fff);
  background-size: 400%;
  width: calc(100% + 0px);
  height: calc(100% + 0px);
  z-index: -1;
  animation: animate 60s linear infinite;
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.glow::after {
  filter: blur(30px);
  opacity: .95
    
}


body {
 background-color: #000;
}
 
/* черный фон заголовка, белый цвет шрифта */
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
kritskiy_a
@kritskiy_a
Frontend-developer
.block {
 display: flex;
 justify-content: center;
 align-items: center;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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