Question

我正在使用Bootstrap的网页上工作。我的页面如下所示：

+----------------------------------------+
| Hello                                  |
+----------------------------------------+
| This is some text.                     |
| This part of the page                  |
| is contained in a                      |
| col-md-6. This                [icon]   |
| content will be long                   |
| and should be allowed                  |
| to scroll. However,                    |
|+---------------------------------------+

我试图让它[icon]在中间垂直浮动。当用户向下滚动页面时，我希望[icon]保持不变。我的问题是我该怎么做？我使用以下代码将[icon]水平居中：

<div class="col-md-6" style="text-align:center;">
  <i class="glyphicon glyphicon-ok"></i>    
</div>

然而，有两个问题：

它不是垂直居中的
当用户向下滚动页面时，图标会滚动页面。它没有固定到位。

我感谢您提供的任何帮助。

Answer 1

您可以fixed使用flexbox图标，并使用{{1}}使图标居中。

In this pen这是一个可能的解决方案。

Answer 2

bootstrap＆＃39; Media＆＃39;组件会这样做。看起来你想要media-right media-middle来做你想做的事情。只需将<i class="glyphicon glyphicon-ok"></i>代替图像即可。

http://getbootstrap.com/components/#media

滚动时将图标固定到位是一个完全不同的东西......你需要从一开始就修复位置（如果你要对齐它的内容发生变化可能会有问题）或检测到滚动JS的事件，并在那时将其定位。

Answer 3

或者，如果您不使用引导程序，则可以自己创建媒体对象。

Harry Roberts将内部引导程序调用为标记对象，因为当您使用.media-middle时，内部显示类型会发生变化

http://csswizardry.com/2013/05/the-flag-object/

通过CSS浮动图标

3 个答案: