Html CSS，垂直对齐：中间带引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18250173/
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
CSS, vertical-align: middle with bootstrap
提问by dirkk
I have a quite simple HTML/CSS problem which is also quite frequecently asked, but unfortunately I did not get it to work also after doing my research.
我有一个非常简单的 HTML/CSS 问题，这个问题也经常被问到，但不幸的是，我在研究之后也没有让它工作。
I am using Bootstrap (3 RC2) and I'd like to vertical align an image into the middle of a row.
我正在使用 Bootstrap (3 RC2)，我想将图像垂直对齐到一行的中间。
<div class="row">
<div class="col-xs-10 col-md-6" id="main">
<p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
</div>
<div class="col-xs-1 col-md-1" style="display: inline-block; vertical-align: middle;">
<img src="http://placekitten.com/100/116" width="100" height="116" />
</div>
</div>
The second, smaller image should be vertically centered in the middle of the div.row. However, it does not seem to work. You can see the problem using this fiddle: http://jsfiddle.net/veQKY/2/
第二个较小的图像应该垂直居中在div.row. 但是，它似乎不起作用。您可以使用此小提琴查看问题：http: //jsfiddle.net/veQKY/2/
It is a requirement to not break the responsiveness of Bootstrap, i.e. when using a device with small width the second image should be stapled horizontally beneath the first image.
要求不破坏 Bootstrap 的响应能力，即当使用宽度较小的设备时，第二张图像应水平装订在第一张图像下方。
回答by user3778043
.centerFlex {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
http://jsfiddle.net/veQKY/2/ check this link worked
回答by Mohaideen Ismail
It will work fine. Use this for that section. It is aligned vertically and horizontally.
它会正常工作。将其用于该部分。它垂直和水平对齐。
display:flex;
justify-contents:center;
align-items:center;
回答by Daniele
The point is that you need the columns to have the same height, so maybe you could do something like this:
关键是你需要列具有相同的高度，所以也许你可以这样做：
Your html
你的html
<div class="container container-sm-height">
<div class="row row-sm-height">
<div class="col-xs-12 col-md-6 col-sm-height">
<img src="http://placekitten.com/500/700" alt="" width="500" height="700" />
</div>
<div class="col-xs-12 col-md-1 col-sm-height col-middle">
<img src="http://placekitten.com/100/116" width="100" height="116" style="display: inline-block; vertical-align: middle;" />
</div>
</div>
</div>
Your css
你的CSS
/* columns of same height styles */
.container-xs-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-xs-height {
display: table;
}
[class*="col-"] {
float: left;
display: block;
vertical-align: middle;
text-align: center;
}
img{
max-width: 100%;
height: auto;
}
@media (min-width: 992px) {
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
}
}
@media (min-width: 1200px) {
.container-lg-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-lg-height {
display:table-row;
}
.col-lg-height {
display:table-cell;
float:none;
}
}
Most part of it is taken from here: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
大部分内容取自这里：http: //www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Here you can see a fiddle
在这里你可以看到一个小提琴
回答by Daniele
<div class="row">
<div class="col-xs-10 col-md-6" id="main">
<p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
</div>
<div class="col-xs-1 col-md-1" style="display: inline-block; top:50%;margin-top:-58px;position:absolute;">
<img src="http://placekitten.com/100/116" width="100" height="116" />
</div>
</div>
vertical-align is only use inside elements
垂直对齐仅在元素内部使用
in this case, your image is 100(w) x 116(h)
在这种情况下，您的图像是 100(w) x 116(h)
so top:50%; then margin-top half of image height (58px)
所以顶部：50％；然后边距图像高度的上半部分（58px）
then the image will vertically centered
然后图像将垂直居中
Update
更新
another method
另一种方法
<div style="background:url(http://placekitten.com/500/700) center no-repeat;width:500px;height:700px;position:relative;">
<img src="http://placekitten.com/100/116" width="100" height="116" style="position:absolute;top:50%;margin-top:-58px;right:0;"/>
</div>
回答by Ashwani
<div class="row">
<div class="col-xs-10 col-md-6" id="main">
<p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
</div>
<div class="col-xs-1 col-md-1" style="display: inline-block; vertical-align: middle;">
<div class="" style="display: table; height: 700px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="" style=" #position: relative; #top: -50%">
<img src="http://placekitten.com/100/116" width="100" height="116" />
</div>
</div>
</div>
</div>
</div>
You need to wrap that div.
你需要包装那个 div。
回答by Avin Varghese
Problem solved.
问题解决了。
CSS:
CSS：
.row {
display: table!important;
}
.test {
display: table-cell!important;
vertical-align:middle;
}
HTML:
HTML：
<div class="row">
<div class="col-xs-10 col-md-6" id="main">
<p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
</div>
<div class="col-xs-1 col-md-1 test">
<img src="http://placekitten.com/100/116" width="100" height="116" />
</div>
</div>
Updated Fiddle: http://jsfiddle.net/afKDJ/show
更新小提琴：http: //jsfiddle.net/afKDJ/show
回答by James
Likely isn't a very elegant solution, but this seemsto work:
可能不是一个非常优雅的解决方案，但这似乎有效：
<div class="row">
<div class="col-xs-10 col-md-6" id="main">
<p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
</div>
<div class="col-xs-1 col-md-1" style="display: inline-block; vertical-align: middle; margin-top:-58px; padding-top:50%;">
<img src="http://placekitten.com/100/116" width="100" height="116" valign="middle" />
</div>
</div>
回答by Dev
<div class="row">
<div class="col-xs-10 col-md-6" id="main">
<p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
</div>
<div class="col-xs-1 col-md-1 middle-img">
<img src="http://placekitten.com/100/116" width="100" height="116" />
</div>
Apply css on image parent div
在图像父 div 上应用 css
.middle-img {display: table-cell;float: none;height: 300px /*any value*/;vertical-align: middle;}
