Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/43: Рейтинг темы: голосов - 43, средняя оценка - 4.88
Котэ
 Аватар для Masredis
80 / 80 / 1
Регистрация: 04.09.2010
Сообщений: 547

Разместить форму по центру

17.05.2015, 23:39. Показов 8625. Ответов 3
Метки bootstrap, css, form, html (Все метки)
Студворк — интернет-сервис помощи студентам
Всем добрый день. Пытаюсь вникнуть в Bootstrap.
Сейчас решил разработать форму, получилось как-то ... странно. Но суть в том , что она у меня не хочет централизироваться.

Так же может кто то может дать совет или показать как лучше всего такую форму реализовывать. Т.к. не нашел нигде
шаблонов на горизонтальную и вертикальную форму сразу вместе.

Картинка как сейчас выглядит форма загружена во вложения.

Сам код формы :
HTML5
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

<div class="container">
                      <h2 style="color:#FF0000">
                       Create YOUR PERSONAL form bootstrap HERE!
                      </h2>
                   
                       <form role="form" class="form-horizontal" >
   
    <div class="form-group">
        <div class="col-sm-3">
          <label>Name</label>
          <input type="text" class="form-control" placeholder="Name">
        </div>
 
      <div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="First"></div>
    </div>
      <div class="form-group">
       <div class="col-sm-3"><label>Email</label><input type="text" class="form-control" placeholder="Email"></div>
        <div class="col-sm-3"><label>Phone</label><input type="text" class="form-control" placeholder="Phone"></div>
        </div>
         <div class="form-group">
       <div class="col-sm-3"><label>Zipcode</label><input type="text" class="form-control" placeholder="Zipcode"></div>
        <div class="col-sm-3"><label>Address</label><input type="text" class="form-control" placeholder="Address"></div>
        </div>
         <div class="form-group">
       <div class="col-sm-3"><label>City</label><input type="text" class="form-control" placeholder="City"></div>
        <div class="col-sm-3"><label>Birthplace</label><input type="text" class="form-control" placeholder="Birthplace"></div>
        </div>
        <div class="form-group">
   <div class="col-xs-3">
   <label>Gender</label>
    <select class="form-control">
      <option>Option one</option>
      <option>Option two</option>
    </select>
 </div>
 <div class="col-xs-3">
 <label>Country of birth</label>
  <select class="form-control">
      <option>Option one</option>
      <option>Option two</option>
    </select>
    </div>
  </div>
         <div class="form-group">
         
    <div class="container">
    <label>Birthday</label>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Day <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">2</a></li>
      </ul>
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Month <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">2</a></li>
        </ul>
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Year <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">2</a></li>
      </ul>
    </div>
    </div>
    <div class="container">
 <label>Time</label>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Hour <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">2</a></li>
      </ul>
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Min <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">2</a></li>
        </ul>
        <div class="checkbox">
            <label>
               <input type="checkbox"> I am over 18 and have read....
            </label>
         </div>
     <button type="button" class="btn btn-success">Success</button>
    </div>
    </div>
  </div>
  
    </form>
  <hr>
                      
                      
                    
                    
                       <!--  next DIV is end FORM-->
                      </div>
Как видно - я форму запихнул в div class="container"

Пытался в CSS Добавить
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  
 
  /*Nope =(  */
 /* margin-left: -25%;  */
 /* margin-top: -25%;  */
 
 
 
 
transform: translate(-50%, -50%);
  
 
 /*  Not even necessary really.  */
  /* e.g. Height could be left out! */
 
  width: 40%;
  height: 50%;
}
и все это запихнуть в <div class="container"> над div class="container" --> ничего не вышло...

Спасибо что прочли, надеюсь не лень будет вам написать ответ..
Миниатюры
Разместить форму по центру  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 17.05.2015, 23:39
Ответы с готовыми решениями:

Разместить ссылки по центру
Вот я столкнулся с такой проблемой. Обратите внимание на объект &quot;Понравилась ли вам статья&quot;.Ссылки &quot;да&quot; и...

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

Разместить блок по центру
не получается установить блок по центру, помогите, пожалуйста &lt;div class=&quot;wy&quot;&gt; &lt;div class=&quot;wy1&quot;&gt; заглавие ...

3
6 / 6 / 4
Регистрация: 15.05.2015
Сообщений: 75
Записей в блоге: 3
18.05.2015, 07:53
Почему бы для горизонтального центрирования не применить margin: 0 auto?
По поводу вертикального выравнивания: http://habrahabr.ru/post/73113/
0
Котэ
 Аватар для Masredis
80 / 80 / 1
Регистрация: 04.09.2010
Сообщений: 547
18.05.2015, 11:41  [ТС]
Спасибо, я нашел решение, тока не до конца решенное =)

Щас покажу что и как.

Для начала я изменил почти полностью форму и вышло следующее

HTML5
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

<form role="form" class="form-horizontal" >
<div class="container">
   <div class="row">
 
            <div class="form-group">
        
    <div class="col-sm-3"><label>&nbsp;</label>
      <input type="text" class="form-control" id="inputEmail3" placeholder="Name">
    </div>
     
    <div class="col-sm-3"><label>&nbsp;</label>
      <input type="text" class="form-control" id="inputEmail3" placeholder="Lastname">
    </div>
    </div>
   
      <div class="form-group">
       <div class="col-sm-3"><label>&nbsp;</label>
       <input type="Email" class="form-control" placeholder="Email">
       </div>
        <div class="col-sm-3"><label>&nbsp;</label>
        <input type="text" class="form-control" placeholder="Phone">
        </div>
        </div>
         <div class="form-group">
       <div class="col-sm-3"><label>&nbsp;</label>
       <input type="text" class="form-control" placeholder="Zipcode">
       </div>
        <div class="col-sm-3"><label>&nbsp;</label>
        <input type="text" class="form-control" placeholder="Address">
        </div>
        </div>
         <div class="form-group">
       <div class="col-sm-3"><label>&nbsp;</label>
       <input type="text" class="form-control" placeholder="City">
       </div>
        <div class="col-sm-3"><label>&nbsp;</label>
        <input type="text" class="form-control" placeholder="Birthplace">
        </div>
        </div>
 <div class="form-group">
 <div class="col-sm-3"><label>&nbsp;</label>
 <select class="form-control">
<option value='' disabled selected style='display:none;'>Gender</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 
</select>
</div>
 <div class="col-sm-3"><label>&nbsp;</label>
 <select class="form-control">
<option value='' disabled selected style='display:none;'>Country of Birth</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 
</select>
</div>
 </div>
 
    
    
 <!-- Time+Days -->
 <div class="form-group">
 
            
 
 <div class="col-md-1">
<select class="form-control input-sm mrgn-bttm-sd" id="form-select-sm">
<option value='' disabled selected style='display:none;'>Day</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
</div>
<div class="col-md-1">
<select name="form-select-sm" class="form-control input-sm mrgn-bttm-sd" id="form-select-sm2">
  <option value='' disabled selected style='display:none;'>Month</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
</div>
<div class="col-md-1">
<select name="form-select-sm2" class="form-control input-sm mrgn-bttm-sd" id="form-select-sm3">
  <option value='' disabled selected style='display:none;'>Year</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
</div>
 
 
 
           
 <div class="col-md-2">
<select class="form-control input-sm mrgn-bttm-md" id="form-select-sm234">
<option value='' disabled selected style='display:none;'>Hour</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
</div>
 
<div class="col-md-1">
<select class="form-control input-sm mrgn-bttm-md" id="form-select-sm44">
  <option value='' disabled selected style='display:none;'>Min</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
</div>
 
 
 
  </div><!-- end Time+Days -->
  
  
   <div class="form-group"><!-- Start for Checkbox and button -->
   
  <!--<div class="form-group has-success">
        <label></label>
        <input id="check-1h" type="checkbox" value="1" data-toggle="checkbox-x" data-size="xl">
    </div>
     -->
 
        <div>
    <label>&nbsp;&nbsp;&nbsp;</label>
    
   <input type="checkbox" class="largerCheckbox" name="checkBox">
   
   <label>I am over 18 and have read and approved the site's Terms Order with oblifation to pay</label>
</div>
<div class="col-md-6">
    <a href="#" class="btn btn-block btn-lg btn-success">OK</a>
    </div>
    
    
  </div><!-- end for Checkbox and button -->
 
  
</div> <!-- Container -->
  </div>  <!-- Row -->
     
  </form>
А в самом CSS для централизирования я использовал
CSS
1
2
3
4

form {
    width: 600px;
    margin: 0 auto;
}
Где width: 600px; - игра краями.

Но если кто может помочь с последним вопросом -

HTML5
1
2
3
4
5

label>&nbsp;&nbsp;&nbsp;</label>
    
   <input type="checkbox" class="largerCheckbox" name="checkBox">
   
   <label>I am over 18 and have read and approved the site's Terms Order with oblifation to pay</label>
По какой то причине при загрузке в любой шаблон формы - этот чекбокс начинает уползать вправо от формы, что не красиво смотрится. Это можно как то решить ?
0
Котэ
 Аватар для Masredis
80 / 80 / 1
Регистрация: 04.09.2010
Сообщений: 547
19.05.2015, 13:27  [ТС]
И так.

Перерыл кучу разных ресурсов и в итоге пришел к более менее оптимальному варианту.

Выкладываю для тех кто может так же столкнуться с такой проблемой весь код формы и css.

HTML5
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

 <div  class="container center_div">
 <form role="form" class="form-horizontal" >
<div class="container">
   <div class="row">
 
            <div class="form-group">
        
    <div class="col-sm-3"><label>&nbsp;</label>
      <input type="text" class="form-control" id="inputEmail3" placeholder="Name">
    </div>
     
    <div class="col-sm-3"><label>&nbsp;</label>
      <input type="text" class="form-control" id="inputEmail3" placeholder="Lastname">
    </div>
    </div>
   
      <div class="form-group">
       <div class="col-sm-3"><label>&nbsp;</label>
       <input type="Email" class="form-control" placeholder="Email">
       </div>
        <div class="col-sm-3"><label>&nbsp;</label>
        <input type="text" class="form-control" placeholder="Phone">
        </div>
        </div>
         <div class="form-group">
       <div class="col-sm-3"><label>&nbsp;</label>
       <input type="text" class="form-control" placeholder="Zipcode">
       </div>
        <div class="col-sm-3"><label>&nbsp;</label>
        <input type="text" class="form-control" placeholder="Address">
        </div>
        </div>
         <div class="form-group">
       <div class="col-sm-3"><label>&nbsp;</label>
       <input type="text" class="form-control" placeholder="City">
       </div>
        <div class="col-sm-3"><label>&nbsp;</label>
        <input type="text" class="form-control" placeholder="Birthplace">
        </div>
        </div>
 <div class="form-group">
 <div class="col-sm-3"><label>&nbsp;</label>
 <select class="form-control">
<option value='' disabled selected style='display:none;'>Gender</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 
</select>
</div>
 <div class="col-sm-3"><label>&nbsp;</label>
 <select class="form-control">
<option value='' disabled selected style='display:none;'>Country of Birth</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 
</select>
</div>
 </div>
 
    
    
 <!-- Time+Days -->
 <div class="form-group">
 
            
 
 <div class="col-md-1">
<select class="form-control input-sm mrgn-bttm-sd" id="form-select-sm">
<option value='' disabled selected style='display:none;'>Day</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
</div>
<div class="col-md-1">
<select name="form-select-sm" class="form-control input-sm mrgn-bttm-sd" id="form-select-sm2">
  <option value='' disabled selected style='display:none;'>Month</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
</div>
<div class="col-md-1">
<select name="form-select-sm2" class="form-control input-sm mrgn-bttm-sd" id="form-select-sm3">
  <option value='' disabled selected style='display:none;'>Year</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
</div>
 
 
 
           
 <div class="col-md-2">
<select class="form-control input-sm mrgn-bttm-md" id="form-select-sm234">
<option value='' disabled selected style='display:none;'>Hour</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
</div>
 
<div class="col-md-1">
<select class="form-control input-sm mrgn-bttm-md" id="form-select-sm44">
  <option value='' disabled selected style='display:none;'>Min</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
</div>
 
 
 
  </div><!-- end Time+Days -->
  
  
   <div class="form-group"><!-- Start for Checkbox and button -->
   
  <!--<div class="form-group has-success">
        <label></label>
        <input id="check-1h" type="checkbox" value="1" data-toggle="checkbox-x" data-size="xl">
    </div>
     -->
 
        
   <div class="col-md-2">
    
   <input type="checkbox" class="largerCheckbox" name="checkBox">
  
  <label>I am over 18 and have read and approved the site's Terms Order with oblifation to pay</label>
   
   
   </div>
 
<div class="col-sm-4">
    <a href="#" class="btn btn-block btn-lg btn-success">OK</a>
    </div>
    
    
  </div><!-- end for Checkbox and button -->
 
  
</div> <!-- Container -->
  </div>  <!-- Row -->
     
  </form>
 
</div>
Хочется обратить внимание что весь этот див сидит у меня в секции. На всякий...

А вот решение в CSS

CSS
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

.center_div{
   width:600px;
    margin:0px auto;
    text-align:left;
    padding:15px;
    } /* value of your choice which suits your alignment */
}
 
/*
form {
    
   width: 100%;
    margin: 0 auto;
 */
}
 
.container1 {float:left; width:100%; margin-right:-100px;}
.container2 {margin-right:110px;}
.center-col {margin-left:100px; }
 
input.largerCheckbox
{
    width: 30px;
    height: 30px;
}

Проблема решена.


Но оставлю еще вопрос, может кто то быстрее меня его решит и поделится - при просмотре на разных мониторах - разрешение динамически меняется. Но бывает глюк что <div class="col-md-2"> просто растягивается во всю ширь. Кто то знает как можно заменить <div class="col-md-2"> на что то аналагичное, но что бы растягивался хорошо ?)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 19.05.2015, 13:27
Помогаю со студенческими работами здесь

Разместить текст по центру
Как сделать, чтобы текст был ровно по центру и по горизонтали, и по вертикали? &lt;a href=&quot;http://a&quot;...

Разместить блок div по центру
Доброго всем времени суток. Ковыряю стандартный код joomla virtuemart. Никак не могу победить- разместить кнопку с количеством и...

Разместить блок absolute по центру
вопрос в том: как сделать так что би блок с position:absolute; размещался по центру всегда??? в блоке position:relative; єтого можно...

Как разместить таблицу по центру?
&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;Таблица с зеброй&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot;...

Разместить круг по центру блока
Уже голову сломал! Нужно, что-бы круг был по центру блока &lt;div...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru