Как по центру выровнять список данных и его кнопку

Question

Я пытаюсь выровнять центр данных по центру вместе с его кнопкой и увеличиваю размер его блока данных. Я попытался поместить align="center" в список ввода, но без изменений. Также не знаю, как увеличить его размер коробки и сделать его отзывчивым. Пожалуйста помоги

код:

<input list="category" name="category" id="textcat">
<datalist id="category">
  <option id="www.google.com" value="fruits" />
  <option id="www.fb.com" value="animals" />
  <option id="www.ymail.com" value="vechiles" />
  <option id="www.msn.com" value="ornaments" />
</datalist>
<input id="btn" type="button" value="submit">

Answer 1

Используя правильную разметку, вы можете сделать это легко! Просто добавьте один дополнительный div с классом начальной загрузки text-center, Попробуйте этот код

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="text-center">
        <form action="" class="form-horizontal">
          <div class="form-group col-sm-8 col-xs-12">
            <input type="text" class="form-control" list="category " name="category " id="textcat ">
            <datalist id="category ">
              <option id="www.google.com " value="fruits " />
              <option id="www.fb.com " value="animals " />
              <option id="www.ymail.com " value="vechiles " />
              <option id="www.msn.com " value="ornaments " />
            </datalist>
          </div>
          <div class="form-group col-sm-4 col-xs-12">
            <input class="btn btn-success btn-block" id="btn" type="button" value="submit ">
          </div>
        </form>

      </div>
    </div>
  </div>
</div>