如何在bootstrap中垂直對齊div中心？

Question

如你所見，我的元素不是垂直對齊的中心。 如何根據主div塊中的最大元素垂直對齊中心所有元素？

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-12"> <div style=""> <div class="col-md-6" style="padding-left: 0;"> <div class="form-group"> <label style="margin-right: 10px">Marital Status:</label> <div class="radio-inline" style="padding-left: 0;"> <label class="radio-inline"><input type="radio" name="marital_status" value="Single">Single</label> </div> <div class="radio-inline"> <label class="radio-inline"><input type="radio" name="marital_status" value="Married">Married</label> </div> </div> </div> <div class="col-md-6" style="padding-right: 0;"> <div class="row"> <div class="col-md-8"> <div class="form-group"> <label for="address_1">Hobby:</label> <input type="text" class="form-control" name="hobbies[]"> </div> </div> <div class="col-md-4"> <button type="button" class="btn btn-primary btn-block">+</button> </div> </div> </div> </div> </div> </div> </div> 

Answer 1

我只是在你的代碼中添加了幾個CSS 。 試試這個我希望它會幫助你。 謝謝

html, 
body {
  height: 100%;
}

.verticalAlignContainer {
  display: flex;
  align-items: center;
  height: 100%;
}

.verticalAlignContainer .row {
  width: 100%;
}

並使用verticalAlignContainer類和container 。

<div class="container verticalAlignContainer">

 html, body { height: 100%; } .verticalAlignContainer { display: flex; align-items: center; height: 100%; } .verticalAlignContainer .row { width: 100%; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container verticalAlignContainer"> <div class="row"> <div class="col-md-12"> <div style=""> <div class="col-md-6" style="padding-left: 0;"> <div class="form-group"> <label style="margin-right: 10px">Marital Status:</label> <div class="radio-inline" style="padding-left: 0;"> <label class="radio-inline"><input type="radio" name="marital_status" value="Single">Single</label> </div> <div class="radio-inline"> <label class="radio-inline"><input type="radio" name="marital_status" value="Married">Married</label> </div> </div> </div> <div class="col-md-6" style="padding-right: 0;"> <div class="row"> <div class="col-md-8"> <div class="form-group"> <label for="address_1">Hobby:</label> <input type="text" class="form-control" name="hobbies[]"> </div> </div> <div class="col-md-4"> <button type="button" class="btn btn-primary btn-block">+</button> </div> </div> </div> </div> </div> </div> </div>