twitter-bootstrap 在行引导程序内垂直对齐 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37408385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical align div inside row bootstrap
提问by JavascriptDeveloper
I want to reproduce a "tinder-like" view so that the 2 like/dislike buttons are vertically centered insidethe row. I have vertically centered the row itself already:
我想重现“类似火种”的视图，以便 2 个喜欢/不喜欢按钮在行内垂直居中。我已经垂直居中行本身：
Figure 1 - how i have it now:
图 1 - 我现在如何拥有它：
Figure 2 - how i want it:
图 2 - 我想要它：
HTML:
HTML：
<div className="vertical-center">
<div className="container text-center">
<div className="row">
<div className="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button">
<p>Left button</p>
</div>
<div className="col-xs-6 col-sm-6 col-md-6 col-lg-6 vacancy-summary">
<h2>Main page</h2>
</div>
<div className="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button">
<p>Right button</p>
</div>
</div>
</div>
</div>
CSS:
CSS：
html, body{
height: 100%;
}
h1, h2, h3, p{
margin: 0px;
}
.container{
width:90%;
}
.top5 {margin-top: 5%;}
.top7 {margin-top: 7%;}
.top10{margin-top: 10%;}
.top15{margin-top: 15%;}
.top17{margin-top: 17%;}
.top30{margin-top: 30%;}
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; /* <-- reset the font property */
}
@media (max-width: 768px) {
.vertical-center:before {
display: none;
}
}
.vote-button{
border: solid 1px black;
padding: 10px 0px;
}
.vacancy-summary{
border: 1px solid black;
padding: 25px 0px;
}
I tried a lot of things but it messed up the other vertical alignment, so to be very clear:
我尝试了很多东西，但它弄乱了另一个垂直对齐方式，所以要非常清楚：
2 vertical alignments here:
这里有 2 个垂直对齐：
- The whole row needs to be vertically centered (like it is now and it works)
- Inside the row, all columns needs to be aligned aswell
- 整行需要垂直居中（就像现在一样并且可以工作）
- 在行内，所有列也需要对齐
Is it something simple I miss or is this to much outside the scope for bootstrap and if so, how do i make it full custom then?
这是我想念的简单事情，还是超出了引导程序的范围，如果是这样，我该如何使其完全自定义？
PS: I'm working with React for this, but i don't think this cause any problems
PS：我正在为此与 React 合作，但我认为这不会导致任何问题
---------EDIT----------
- - - - -编辑 - - - - -
FYI
供参考
I have to use className instead of class in my html because i'm using this in a react class (inside the render function).This because "class" is a reserved word in react.
我必须在我的 html 中使用 className 而不是 class 因为我在反应类中使用它（在渲染函数内）。这是因为“类”是反应中的保留字。
回答by Jainam
Just try this and see snippet or Bootply Demo
试试这个，看看代码片段或Bootply 演示
You have given the class like this class="" insted of className=""
你给了这样的类 class="" insted of className=""
/* CSS used here will be applied after bootstrap.css */
html, body{
height: 100%;
}
h1, h2, h3, p{
margin: 0px;
}
.container{
width:90%;
}
.top5 {margin-top: 5%;}
.top7 {margin-top: 7%;}
.top10{margin-top: 10%;}
.top15{margin-top: 15%;}
.top17{margin-top: 17%;}
.top30{margin-top: 30%;}
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; /* <-- reset the font property */
}
@media (max-width: 768px) {
.vertical-center:before {
display: none;
}
}
.vote-button{
border: solid 1px black;
padding: 10px 0px;
}
.vacancy-summary{
border: 1px solid black;
padding: 25px 0px;
}
.vertical-center .row {
align-items: center;
display: flex;
}<div class="vertical-center">
<div class="container text-center">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button">
<p>Left button</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 vacancy-summary">
<h2>Main page</h2>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button">
<p>Right button</p>
</div>
</div>
</div>
</div> 回答by Nenad Vracar
First instead of classNameyou should use class. Second there is no way to do this with bootstrap 3 (maybe bootstrap 4) so you can add some custom css or Flexboxin this case to get that vertical-align DEMO
首先而不是className你应该使用class. 其次，引导程序 3（可能是引导程序 4）无法做到这一点，因此您可以添加一些自定义 css，或者Flexbox在这种情况下获得垂直对齐的DEMO
.row > div {
border: 1px solid black;
}
.vertical-center .row {
display: flex;
align-items: center;
}
p {
margin: 0;
}
If you want to use smbreak-point or some other you can also use media queries DEMO
如果你想使用sm断点或其他一些你也可以使用媒体查询DEMO
