Всем привет. Не могу корректно поместить в блок авторизацию, прилип к блоку Как пофиксить? HTML: <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> Код (CSS): */ .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; } /* черный фон заголовка, белый цвет шрифта */ --- Добавлено ---
Легко и просто. Если говорить чисто о вашей таблице, то она не прилипла вовсе. Обычным margin позиционируется.
Ну, к примеру, я у вас добавил в код Код (CSS): table { margin: auto; } и соответственно таблица ваша встала по центру блока. Дальше позиционируйте как вам нужно