[英]How to vertically align center a div in bootstrap?
As you can see my element is not vertically aligned center. 如你所见,我的元素不是垂直对齐的中心。 How can I vertically align center all elements in a row according to the biggest element in the main div block?
如何根据主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>
I just add few CSS in your code. 我只是在你的代码中添加了几个CSS 。 Try this i hope it'll help you out.
试试这个我希望它会帮助你。 Thanks
谢谢
html,
body {
height: 100%;
}
.verticalAlignContainer {
display: flex;
align-items: center;
height: 100%;
}
.verticalAlignContainer .row {
width: 100%;
}
and use verticalAlignContainer
class with container
. 并使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.