假设我有以下 HTML(好吧,haml,但是......):
.container
.row
.span4
%h1
%p
%img
.span4
%h1
%p
%img
.span4
%h1
%p
%img
因此,每一列都有一个标题、一些文本和一个图像。有没有办法让图像垂直对齐,就像这样完成的:
.container
.row
.span4
%h1
%p
.span4
%h1
%p
.span4
%h1
%p
.row
.span4
%img
.span4
%img
.span4
%img
但不创建新行?原因是,我希望图像与标题和文本分组,以便在移动设备/平板电脑布局上,图像按照它们匹配的内容进行布局,而在第二种情况下,您将得到三个一组文本,然后是三张图像。
最佳答案
我可以想到两种方法:
无论如何,在某些情况下可能不需要 img-outer
。
<div class="container">
<div class="row">
<div class="span4">
<h1></h1>
<p></p>
<div class="img-outer"><img src="" /></div>
</div>
<!-- ... -->
</div>
</div>
高度控制
如果您为上面的文本元素设置固定高度 h1
和 p
,那么您的图像将会对齐。
您还可以为.span
设置固定高度并使用绝对定位。如下所示:
.container .row [class*="span"] {
height: 100px;
padding-bottom: 150px;
position: relative;
}
.container .row [class*="span"] .img-outer{
height: 150px;
line-height: 150px;
vertical-align: middle;
position: absolute;
bottom: 0;
/* Take the whole width */
left: 0;
right: 0;
}
其他定位
似乎可行,我没有足够的绝对定位知识来保证结果是跨浏览器的。
.container .row {
padding-bottom: 150px;
position: relative;
}
.container .row [class*="span"] .img-outer{
height: 150px;
line-height: 150px;
vertical-align: middle;
position: absolute;
bottom: 0;
/* Take the whole width */
width: 300px; /* .span4 width */
}
关于css - 使用Bootstrap的网格,有没有一种方法可以在不创建新行的情况下垂直对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11363833/