どのように水平方向に次の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> 

を揃える：

をこのスクリーンショットは、私が望んでいないですが、私は、彼らは中央の水平を合わせたいです。どうもありがとうございました。私はブートストラップを使用しており、他のCSSファイルは使用していません。

Answer 1

使用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>

を追加しました210

Answer 2

あなたが理解するためにLiとリストインラインクラス

.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>