Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
5 / 3 / 2
Регистрация: 29.04.2018
Сообщений: 221
1

form по центру страницы

24.10.2020, 10:35. Показов 987. Ответов 6

Как сделать, чтобы form был по центру страницы (по вертикали и горизонтали) (как google), а при нажатии на кнопке и загрузке через php дополнительных блоков div он возвышался на верх страницы (как сейчас).

У меня есть вот такой код:
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
  <head>
    <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="/style/style.css" >
</head>
<body>
<style>
    body{
    font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
    background-color: black;
    margin: 0% 0% 0px 0%;
    color: white;
}
    .cont{
    margin: 8% 5% 4% 5%;
    width: 90%;
    text-align: -webkit-center;
}
    .txt{
    background-color: black;
    padding: 10px 18px;
    width: 510px;
    border: 2px solid green;
    border-radius: 5px 0px 0px 5px;
}
.submit{
    text-decoration: none;
    color: #eeeeee;
    padding: 10px 20px;
    background-color: green;
    width: fit-content;
    border: 2px solid green;
    border-radius: 0px 5px 5px 0px;
    transition: 0.2s;
    cursor: pointer;
}
 .submit:hover, .submit:focus, .button:focus, button:focus, .button:hover, button:hover{
    border-color: #0f3460;
    background-color: #0f3460;
    transition: 0.2s;
}
</style>
<div class="cont">
    <h5>ТЕКСТ</h5>
   <form method="post">
        <div>
            <input class="txt"  id="txt" value="<?php echo $urlvalue;?>"required/><input class="submit" id="submit" type="submit" value="submit">
       </div>
    </form>
    <div style="margin-top: 3%;"><?php echo $result;?></div>
</div>  
</body>
</html>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.10.2020, 10:35
Ответы с готовыми решениями:

Блок по центру страницы
Нужно было выровнять блок по центру экрана. Впрочем, после минуты поиска решение было найдено...

Выровнять по центру страницы
...

Выровнять форму по центру страницы
Всем привет! У меня вот такая проблема, нужно форму выставить по середине страницы, вот код...

Выставить блок по центру страницы
Имеется маленький блок, блок нужно выставить по центру страницы. Именно со всех сторон (справа,...

6
-4 / 26 / 9
Регистрация: 06.03.2015
Сообщений: 209
24.10.2020, 12:28 2
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
  <head>
    <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="/style/style.css" >
</head>
<body>
<style>
    body{
    font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
    background-color: black;
    margin: 0% 0% 0px 0%;
    color: white;
}
    .cont{
    margin: calc(46vh - 27px) auto 0 auto;
    width: 90%;
    text-align: -webkit-center;
}
    .cont h5 {
      margin-bottom: 4%;
}
    .txt{
    background-color: black;
    padding: 10px 18px;
    width: 510px;
    border: 2px solid green;
    border-radius: 5px 0px 0px 5px;
}
.submit{
    text-decoration: none;
    color: #eeeeee;
    padding: 10px 20px;
    background-color: green;
    width: fit-content;
    border: 2px solid green;
    border-radius: 0px 5px 5px 0px;
    transition: 0.2s;
    cursor: pointer;
}
 .submit:hover, .submit:focus, .button:focus, button:focus, .button:hover, button:hover{
    border-color: #0f3460;
    background-color: #0f3460;
    transition: 0.2s;
}
</style>
<div class="cont">
    <h5>ТЕКСТ</h5>
   <form method="post">
        <div>
            <input class="txt"  id="txt" value="<?php echo $urlvalue;?>"required/><input class="submit" id="submit" type="submit" value="submit">
       </div>
    </form>
    <div style="margin-top: 3%;"><?php echo $result;?></div>
</div>  
</body>
</html>
1
5 / 3 / 2
Регистрация: 29.04.2018
Сообщений: 221
24.10.2020, 13:52  [ТС] 3
А как сделать чтобы class= "cont" был в горе страницы, как у меня когда загружается <?php echo $result;?> (он загружается после нажатия на кнопку)?
0
-4 / 26 / 9
Регистрация: 06.03.2015
Сообщений: 209
24.10.2020, 13:57 4
Не совсем понял. Ты хочешь, чтобы сам класс начинался сверху страницы, а вот текст и инпут посредине?
Кстати, использовать тут php плохая идея. php - серверный язык. Для всего что касается пользователя лучше использовать JavaScript. Он удобнее и в нем гораздо больше возможностей для взаимодействия с страницей.

Добавлено через 18 секунд
Не совсем понял. Ты хочешь, чтобы сам класс начинался сверху страницы, а вот текст и инпут посредине?
Кстати, использовать тут php плохая идея. php - серверный язык. Для всего что касается пользователя лучше использовать JavaScript. Он удобнее и в нем гораздо больше возможностей для взаимодействия с страницей.
0
5 / 3 / 2
Регистрация: 29.04.2018
Сообщений: 221
24.10.2020, 14:31  [ТС] 5
Цитата Сообщение от Dave_ Посмотреть сообщение
Не совсем понял. Ты хочешь, чтобы сам класс начинался сверху страницы, а вот текст и инпут посредине?
смотри когда заходишь на страницу то она должна выглядеть как ты написал код, а когда нажимаешь на кнопку, то как я написал.
1 до нажатия, 2 после нажатия
[del]
0
Миниатюры
form по центру страницы  
-4 / 26 / 9
Регистрация: 06.03.2015
Сообщений: 209
24.10.2020, 14:49 6
Лучший ответ Сообщение было отмечено terau как решение

Решение

Javascript
1
2
3
4
5
<script>
document.getElementById('submit').addEventListener('click', function(){ 
    document.getElementsByClassName('cont')[0].style.margin = '10% auto 0 auto'
})
</script>
Засунь это в конец body
1
5 / 3 / 2
Регистрация: 29.04.2018
Сообщений: 221
24.10.2020, 14:58  [ТС] 7
спасибо
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.10.2020, 14:58

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

DIV Выравнивание по центру страницы
Задумка такая: есть div шириной во всю страницу, с фиксированной высотой.. В него вложено 3...

Выровнять контент по центру страницы
не подскажите как выравнять этот скрипт по центру ? &lt;img style=&quot;top: 7%; left: 30%; width: 563px;...

css div по центру страницы
вот код, как сделать что бы все блоки были по центру страницы??? &lt;style&gt; .leftMenu { ...

Размещение блока, на сайте, по центру страницы
Всем добрый вечер. Пытаюсь научиться размещать блок на сайте таким образом, чтобы он был поверх...

Вёрстка страницы, расположение ссылок по центру
Ребята такая вот канетель, хочу этот див в котором несколько ссылок расположить по середине вот код...

Выравнивание фиксированного меню по центру страницы
Коллеги, добрый день. Подскажите, как выравнять блок MENU по центру в ниже представленном коде. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.