html - 使用 Bootstrap 在页面上居中媒体对象

Question

我一直在到处寻找如何在页面中间的 Bootstrap 中将媒体对象居中。我认为它应该非常简单，但我想不出一种方法来做到这一点。我以前把它放在一个居中的列中，但不能在实际的列中居中，所以它看起来不对。这是我最近的尝试，但仍然无效。我将 text-align:center 添加到 center-block CSS 中。任何建议将不胜感激。

    <div id="email" class="center-block">
      <div class="media">
        <a class="media-left" href="#">
          <img src="pictures/computerIcon.jpg" alt="...">
        </a>
        <div class="media-body">
          <h3 class="media-heading">email@example.com</h3>
        </div>
      </div>
    </div>

Answer 1

不清楚你想让媒体对象在哪个容器中居中，我假设你想让它在整个屏幕中居中。

• html , body和 .outer容器都得到一个height: 100%制作 .outer容器占据整个屏幕。
• .outer容器获得 position: relative在定位 .inner 时引用其位置/尺寸容器。
• .inner容器获得 position: absolute把它带到文档流之外(否则它会占用 100% 的屏幕宽度，这也是类 .center-block 没有做任何事情的原因)
• .inner 的左上角容器被移动到 .outer 的中心通过添加 top: 50% 容器和 left: 50%
• 移动 .inner容器回到屏幕中心，我们需要将它的宽度和高度移动一半，这是通过 `transform: translate(-50%, -50%).

此解决方案应该从 IE9 开始工作(添加 -ms-transform 以获得 IE9 支持)并且仅当 .media 的内容对象不会大于屏幕宽度的一半或高度的一半。

html,
body {
  height: 100%;
}

.outer {
  position: relative;
  height: 100%;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="email" class="outer">
  <div class="media inner">
    <a class="media-left" href="#">
      <img src="http://placekitten.com/g/64/64" alt="...">
    </a>
    <div class="media-body">
      <h3 class="media-heading">mattkowalczykowski@gmail.com</h3>
    </div>
  </div>
</div>