使用 Bootstrap 在列中居中媒体 div

【问题标题】：Center Media div in a column using Bootstrap使用 Bootstrap 在列中居中媒体 div
【发布时间】：2018-05-15 01:05:12
【问题描述】：

我有一个 html 模板页面。在模板中，我有一个带有徽标和一段文字的媒体对象。这两个项目如何在一个 5 宽的列中。它偏离中心并与左侧对齐。无论栏有多大（5,7,9,12），我都想将媒体块放在栏内并将其居中。做到这一点的最佳方法是什么。这是html代码。我正在使用最新版本的 bootstrap 3.3.7 和 4.0.0 beta。

<div class="row">

    <div class="col-xl-5 col-lg-5">
      <div class="media">
        <img class="align-self-center mr-3 welcome-icon-size" src="{% static 'images/yap-logo-possible-1.png'%}" alt="Generic placeholder image">
        <div class="media-body">
          <h1 class="mt-0 welcome_title">Split Beta</h1>
        </div>
      </div>
    </div>

  </div>

这里是展示：

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案1】：

我可以看到您正在使用引导程序，只需将 text-center 类放入您的 col-xl-5 col-lg-5 以对齐内部元素的中心。您可以使用自己的类 logo 进行内部元素样式设置。

.logo {
  display: inline-block
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <div class="col-xl-5 col-lg-5 text-center">
    <div class="logo">
      <img class="align-self-center mr-3 welcome-icon-size" src="http://via.placeholder.com/350x150" alt="Generic placeholder image">
      <h1 class="mt-0 welcome_title">Split Beta</h1>
    </div>
  </div>
</div>

【讨论】：