如何将以下html标记设置为水平对齐

Question

    <div class="row" style="margin-top:20px">
    <label for ="datepicker" class="col-lg-2 col-md-2">选择时间</label>
    <input type="text" id="datepicker" class="datepicker col-lg-2 col-md-2" data-date-format="yyyy-mm-dd" placeholder="请选择日期" />
    <div class="col-lg-3 col-md-3"></div>
    <label class="col-lg-2 col-md-2">填写检查人员</label>
    <input class="col-lg-2 col-md-2" id="name" type="text" placeholder="请输入名字" value="test1111" />
    <div class="col-lg-1 col-md-1"></div>

</div>

因为我得到以下屏幕截图：

这个截图不是我想要的，我希望它们对齐中心水平。非常感谢你。我正在使用Bootstrap而没有其他css文件。

Answer 1

您可以使用li和list-inline类

.vcenter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

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

<div class="row vcenter" style="margin-top:20px">
  <div class="col-lg-3 col-md-3 col-xs-3 text-center "><label for="datepicker">选择时间</label></div>
  <div class="col-lg-3 col-md-3 col-xs-3 text-center "><input type="text" class="datepicker" id="datepicker"  data-date-format="yyyy-mm-dd" placeholder="请选择日期" /></div>
  <div class="col-lg-3 col-md-3 col-xs-3 text-center "><label>填写检查人员</label></div>
  <div class="col-lg-3 col-md-2 col-xs-3 text-center "><input id="name" type="text" placeholder="请输入名字" value="test1111" /></div>
</div>

Answer 2

使用Flex属性了解我添加了background-color:#ccc

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.center {
    display: flex;
    align-items: center;
    padding: 15px;
   
}
.center>li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    list-style: none;
    background-color: #ccc;
}
li>label {
margin: 0;
}

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

<div class="row">
<ul class="center">
  <li class="col-lg-3 col-md-3 col-xs-3 text-center"><label for="datepicker">选择时间</label></li>
  <li class="col-lg-3 col-md-3 col-xs-3 text-center"><input type="text" class="datepicker" id="datepicker"  data-date-format="yyyy-mm-dd" placeholder="请选择日期" /></li>
  <li class="col-lg-3 col-md-3 col-xs-3 text-center"><label>填写检查人员</label></li>
  <li class="col-lg-3 col-md-2 col-xs-3 text-center"><input id="name" type="text" placeholder="请输入名字" value="test1111" /></li>
</ul>
</div>