如何居中对齐数据列表及其按钮

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 和 bootstrap 默认值 class 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>

如何居中对齐数据列表及其按钮

how to center align data list and its button

html

css

twitter-bootstrap

html-datalist