Bootstrap 3 css，包含媒体类的居中元素答案

【问题标题】：Bootstrap 3 css, centering element containing media classesBootstrap 3 css，包含媒体类的居中元素
【发布时间】：2016-10-12 02:16:48
【问题描述】：

居中元素通常使用 style="display:block;margin:0 auto" 或在引导程序 3 中通过简单地使用 center-block 类来完成，但不知何故，如果您想将包含媒体类的元素居中，即：

<div class="media">
    <div class="center-block">
        <div class="media-left"><img class="media-object" src="..."></div>
        <div class="media-body">
            <h4 class="media-heading">Header</h4>
            <h5>Info</h5>
        </div>
    </div>
</div>

如果我改用 text-center 类，则只有 media-body 居中，而 media-left 元素固定在同一个位置

【问题讨论】：

标签： css twitter-bootstrap-3 media

【解决方案1】：

center-block 仅将块元素居中，因此您需要使用特定的块才能使用。要使文本居中，您必须使用文本居中。我只是在这里创建一个示例。只需检查它并向我们发送您的反馈。

演示 - http://goo.gl/QrgSE1

【讨论】：

嘿 Nithin，这个特殊的代码在图像下方有文本，而 media-left 和 media-body 应该在左侧有图像，而文本直接在其右侧，无论如何要修复它?
嘿.. 我为你做了新的演示。如果你想要更多的东西让我知道。演示 - goo.gl/mS90oR

【解决方案2】：

虽然我还没有找到使用媒体引导 css 的方法，但有一个简单的方法：

<div align = 'center'>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

这是一个演示： https://jsfiddle.net/tj2qx659/

【讨论】：