Центрируйте кнопки бутстрапа горизонтально

Question

Я пытаюсь сделать мои две кнопки центрами, как то, что я делаю с h2, но не удалось.

Код:

HTML:

<div class="container theme-showcase" role="main"> 
     <div id="innermain" class="col-xs-12"> 
      <div><h2>Please choose one button</h2></div> 
      <div id="row" class="col-xs-12"> 
       <div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 1</div> 
       <div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 2</div> 
       </div> 
      </div> 
     </div> 

CSS:

#kiosk_btn{font-size: 3vh; background-color: #141E26; border:none; box-shadow: 5px 5px 5px black; margin: 2vh; padding-top:2vh; color:white;} 
    #kiosk_btn:active{outline: none; text-decoration: none;} 
    #kiosk_btn:focus{outline: none; text-decoration: none; } 
    #kiosk_btn:hover{text-decoration: none; background-color: #213140;} 
    h2{text-align: center;} 

JSFIDDLE

Answer 1

Проверьте обновленный fiddle ,

Добавить два пусто div с col-xs-3. Один над двумя кнопками и один ниже, который заполняет ширину col-xs-12.

Fiddle использует class для установки кнопки CSS свойство вместо id

Side Примечание: Убедитесь, что использовать только один ид для кнопки или другого элемента.

Answer 2

Ваш код содержит Mulitple ошибки:

• неправильно ДИВОЙ вложенность
• не использует (бутстрап) строка и столбец * в том же элементе
• строки класс в начальной загрузке, а не идентификатор
• использовать идентификаторы (#kiosk_btn) только один раз или сделать его класс

что отложить в сторону, это будет получить нужный результат:

#kiosk_btn{font-size: 3vh; background-color: #141E26; border:none; box-shadow: 5px 5px 5px black; margin: 2vh; padding-top:2vh; color:white;} 
#kiosk_btn:active{outline: none; text-decoration: none;} 
#kiosk_btn:focus{outline: none; text-decoration: none; } 
#kiosk_btn:hover{text-decoration: none; background-color: #213140;} 
.col-xs-12 {text-align: center;} 


<div class="container theme-showcase" role="main"> 
<div id="innermain" class="col-xs-12"> 
    <div><h2>Please choose one button</h2></div> 
    <div id="row" class="col-xs-12"> 
     <div id="kiosk_btn" class="btn btn-default" onclick="">Button 1</div> 
     <div id="kiosk_btn" class="btn btn-default" onclick="">Button 2</div> 
     </div> 
    </div> 
</div> 

Answer 3

Для этого вы можете изучить свойство CSS transform. Который применяет 2D или 3D преобразование к элементу. Это позволяет поворачивать, масштабировать, перемещать, перекосить и т. Д. Элементы.

В вашем случае вы будете использовать transform: translate(X, Y) где X и Y должны быть заменены либо% значения, пикселы или эм значения

Я отредактировал скрипку, чтобы соответствовать дать вам общее представление о том, что нужно сделать, чтобы достичь это: fiddle

в основном то, что вы делаете, вы добавляете класс в DIV окружающих ваши кнопки, в этом случае .buttons

Назначение кнопок класс:

.buttons { 
    -webkit-transform: translate(20%, 50%); 
    -moz-transform:translate(20%, 50%); 
    transform:translate(20%, 50%); 
} 

Отредактированный HTML:

<div class="container theme-showcase" role="main"> 
    <div id="innermain" class="col-xs-12"> 
    <div><h2>Please choose one button</h2></div> 
     <div id="row" class="col-xs-12 buttons"> 
     <div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 1</div> 
     <div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 2</div> 
     </div> 
    </div> 
</div> 

Answer 4

Использование самонастройки встроенный класс text-center для выравнивания по центру заголовка и кнопок пытаются использовать grid offset concept из начальной загрузки. Заполните fiddle для справки.

Answer 5

Пробуйте использовать классы form-inline и text-center на форме. Это своего рода хакерство, но работает отлично, пока экран имеет размер 768 пикселей и выше, иначе он будет деградировать, когда это необходимо. См. Рабочий скрипт here