使用Bootstrap

Question

我有一个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>

这是显示屏：

Answer 1

我可以看到你正在使用bootstrap，只需将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>