将四个图像定位在同一个位置,以屏幕为中心,位于bootstrap .container中

时间:2013-02-20 16:49:27

标签: css twitter-bootstrap containers center layer

我想在屏幕上的相同位置放置四个图像,居中并在引导程序.container中,这样如果图像变大,它们就会调整大小。

目标是制作一个包含完整徽标的网站的第一页,黑色和白色。

我使用地图/区域,以便在鼠标输入事件中我可以在徽标后面显示图像,在特定的徽标下创建某种阴影(我不能通过css,因为它具有特定的形状)区域。

我的四张图片如下:

  • 完整徽标
  • 左上角的
  • 阴影
  • 右上角的阴影
  • 底部阴影

它们都具有完全相同的大小。我认为只使用.pagination-centered对所有这些组合起来就足够了,但它不起作用。

我为所有图像尝试了以下CSS(全部嵌入单独的div中)

position:absolute;
left:50%;
top:50%;
margin-left:-157px;
margin-right:-157px;
/* half of img real size */

它运行良好但不适用于没有正确调整图像尺寸且底部条显示在屏幕中间的手机上,因为我猜测定位时不考虑图像高度。

1 个答案:

答案 0 :(得分:0)

没关系,我发现它并且实际上感到非常愚蠢:

我只是使用多个css类,背景应用于图像本身。

在响应式设计上它不能很好地工作,因为背景没有调整大小,但我很确定我可以找到一种解决方法。如果不是,我将使用两组图像。而且由于回调是在mouseenter事件上,所以在移动设备上它并不重要!

希望它会帮助某人