Bootstrap柱内容居中和绝对定位(Bootstrap Column Content Centering and Absolute Positioning)

Bootstrap柱内容居中和绝对定位(Bootstrap Column Content Centering and Absolute Positioning)

我有一个有3列的bootstrap行。 列除了移动之外的所有内容都水平显示。 在移动设备中，它们垂直堆叠，这就是我想要的......这就是问题所在。

我在3列中的每一列中都有响应（img-responsive）图像。 在移动显示器中，我希望图像在列中居中。 最重要的是，我需要在响应式图像上有2个div，绝对定位。 它在chrome中运行良好，但在IE和FireFox中，由于外部div具有显示：inline-block，因此图像无响应。

这是代码：

<div class="row"> <div class="col-md-4 col-sm-6" style="text-align:center;"> <div style="margin-bottom:15px;position:relative;display: inline-block;"> <div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;"> Live Deal </div> <img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" /> <div class="deal2Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div> </div> </div> <div class="col-md-4 col-sm-6" style="text-align:center;"> <div style="margin-bottom:15px;position:relative;display: inline-block;"> <div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;"> Live Deal </div> <img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" /> <div class="deal3Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div> </div> </div> <div class="col-md-4 col-sm-6" style="text-align:center;"> <div style="margin-bottom:15px;position:relative;display: inline-block;"> <div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;"> Live Deal </div> <img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" /> <div class="deal4Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div> </div> </div> </div>

这是它在chrome和firefox中的外观。

Chrome桌面：

Chrome移动版：

在移动设备中，当窗口宽度小于图像时，图像由于img-responsive而缩放。

Firefox桌面：

Firefox Mobile

请注意firefox图像不再响应....但它在移动显示中的列中居，并且2 div的绝对定位是正确的。

有没有办法实现跨浏览器兼容？ 我尝试了很多选项，但是没有内联块，我无法在响应图像上正确定位绝对元素，也无法在移动显示的列中居中。

I have a bootstrap row that has 3 columns. The columns display horizontally in everything except mobile. In mobile they stack vertically, which is what I want... here's the issue.

I have responsive (img-responsive) images within each of the 3 columns. In the mobile display, I want the images to be centered within the column. On top of that I need to have 2 div's with absolute positioning over the responsive images. It works fine in chrome, but in I.E. and FireFox, the images are not responsive due to the outer div which has display:inline-block.

Here's the code:

<div class="row"> <div class="col-md-4 col-sm-6" style="text-align:center;"> <div style="margin-bottom:15px;position:relative;display: inline-block;"> <div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;"> Live Deal </div> <img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" /> <div class="deal2Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div> </div> </div> <div class="col-md-4 col-sm-6" style="text-align:center;"> <div style="margin-bottom:15px;position:relative;display: inline-block;"> <div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;"> Live Deal </div> <img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" /> <div class="deal3Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div> </div> </div> <div class="col-md-4 col-sm-6" style="text-align:center;"> <div style="margin-bottom:15px;position:relative;display: inline-block;"> <div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;"> Live Deal </div> <img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" /> <div class="deal4Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div> </div> </div> </div>

And here's how it looks in chrome vs. firefox.

Chrome desktop:

Chrome mobile:

In mobile, when the windows width is smaller than the image, the image scales due to img-responsive.

Firefox desktop:

Firefox Mobile

Note how the firefox images are no longer responsive.... however it is centered in the column in the mobile display, and the absolute positioning of the 2 div's is correct.

Is there any way to accomplish this that is cross-browser compatible? I've tried a bunch of options, but without inline-block, I can't get the absolute elements positioned properly on the responsive image as well as centered in the column for the mobile display.

最满意答案

为了获得更好的结果作为响应式图像，我使用jQuery。

你应该尝试类似： 带有CODEPEN链接的示例jQuery reponsive图像

Here's what I did to fix it... it was simpler than I thought:

<div class="col-md-4 col-sm-6" style="text-align:center;"> <div class="homeLiveDealMobile"> <div class="liveDealBlock"> Live Deal </div> <img class="img-responsive imgBorder" src="http://www.weekesisland.com/photos/atv.jpg" /> <div class="deal3Timer homepageTimer"></div> </div> </div>

CSS:

.liveDealBlock { position:absolute; top:0; right:0; padding:5px; font-weight:bold; background-color:#bb091f; color:#FFF; } .homeLiveDealMobile { margin-bottom:15px !important; position:relative; } .homepageTimer { position:absolute; bottom:1px; right:1px; width:190px; opacity:.9; } @media(max-width:767px){ .homeLiveDealMobile { max-width:391px !important; margin:auto; } }