Bootstrap 4 Beta 将媒体正文文本对齐到中间答案

【问题标题】：Bootstrap 4 Beta align media-body text to middleBootstrap 4 Beta 将媒体正文文本对齐到中间
【发布时间】：2018-04-04 16:25:30
【问题描述】：

我一直在尝试将media-body 文本与middle 在图像方面对齐，但我不知道如何使用新的Bootstrap 4 beta 版本来做到这一点。

我尝试过this solution，但它不适用于新版本。

我也尝试过使用text-center,align-middle，但这也没有用。

V3.3.7 中有一个类 media-middle，但它在 v4 beta 中不起作用。

这里是Jsfiddle。如果有人可以帮助我，那就太好了。

以下是我的media list 代码。

<div class="container">
  <div class="row mt-3">
    <div class="col-lg-6 col-md-12 col-sm-12 col-6">
      <ul class="list-group">
        <li class="media mb-2">
          <img class="mr-3 rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body pagination-centered">
            <h6>No commission on refunds or event cancellation</h6>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

非常感谢

【问题讨论】：

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

【解决方案1】：

一个简单的解决方法可能是将d-flex 和align-items-center 类添加到每个li 和每个<div class="media-body">。

在flexbox 术语中，您可以将display: flex 和align-items: center 添加到li 和li > div。请参阅下面的演示和updated fiddle here：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<div class="container">
  <div class="row mt-3">
    <div class="col-lg-6 col-md-12 col-sm-12 col-6">
      <ul class="list-group">
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3 rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body pagination-centered  d-flex align-items-center">
            <h6>No commission on refunds or event cancellation</h6>
          </div>
        </li>
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3  rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body d-flex align-items-center" style="height:64px;">
            <h6>Sell tickets</h6>
          </div>
        </li>
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3  rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body d-flex align-items-center">
            <h6>Book camping/Stables</h6>
          </div>
        </li>
      </ul>
    </div>
    <div class="col-lg-6 col-md-12 col-sm-12 col-6">
      <ul class="list-group ">
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3  rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body d-flex align-items-center">
            <h6>Discounted prices for club members</h6>
          </div>
        </li>
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3  rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body d-flex align-items-center">
            <h6>Live scoring with JJD and Jumpscore</h6>
          </div>
        </li>
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3  rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body d-flex align-items-center">
            <h6>Live editing during the show</h6>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

首先，您应该为<li> 元素添加display:inline-block，并使用class="text-center" 使图像居中。然后您还应该在media-body 中使用class="text-center"。

【讨论】：

【解决方案3】：

media-middle，在版本中更名为align-middle。 4，设置vertical-align: middle，这对弹性项目不起作用。

对于弹性行项目，在media-body 元素上使用align-self-center，其作用类似于align-middle 对内联块元素的作用。

原因是它的父元素 media 具有 align-items: flex-start（顶部对齐 flex 行项目），因此文本上的 property:value align-self: center 将使其垂直居中。

注意，h6 元素有一个默认的边距，它在垂直方向上偏移了一点，要解决这个问题，你可以使用内置的 m-0 类，或者创建你自己的规则 .media-body h6 { margin: 0; }

Updated fiddle

堆栈sn-p

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row mt-3">
    <div class="col-lg-6 col-md-12 col-sm-12 col-6">
      <ul class="list-group">
        <li class="media mb-2">
          <img class="mr-3 rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body pagination-centered align-self-center">
            <h6>No commission on refunds or event cancellation</h6>
          </div>
        </li>
        <li class="media mb-2">
          <img class="mr-3  rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body align-self-center">
            <h6>Sell tickets</h6>
          </div>
        </li>
        <li class="media mb-2 ">
          <img class="mr-3  rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body align-self-center">
            <h6>Book camping/Stables</h6>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

或者你当然也可以在media元素上使用弹性容器类align-items-center， updated fiddle，使用哪一个取决于其他弹性项目的行为方式。

【讨论】：