html - 将固定容器置于引导轮播之上

Question

我有一个全屏版的 bootstrap carousel，效果很好。

但是，我想将包含三个图标的 div 水平和垂直居中，并将其固定在滑动轮播图像上。

我试过为类设置宽度:

.centered {
  position:fixed; 
  width: 500px;
  margin: 0 auto;

 }

不过，这三个图标并没有从左上角算起。

如果你想检查我的 HTML 代码，这里是网站的链接:

http://www.gregorydanelian.comule.com/stu/

非常感谢编码员!

Answer 1

使用绝对/固定居中:

  .parent {
     position: relative;
  }
  .centered {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     width: 500px;
     height: 200px;
 }

使用这种方法，您将水平和垂直居中。缺点是您需要居中元素的固定宽度和高度。

这是 position: fixed; http://jsfiddle.net/ngP8f/ 的版本

祝你好运!