Question

我一直在尝试将media-body文字与图片的middle对齐，但我无法弄清楚如何使用新的Bootstrap 4 beta版本进行操作。

我尝试了this solution，但它不能用于新版本。

我也尝试使用text-center，align-middle，但这也不起作用。

media-middle中有一个课程V3.3.7，但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>

非常感谢

Answer 1

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

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

＆＃13;

<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>

＆＃13;

Answer 2

media-middle，在ver中重命名为align-middle。 4，设置vertical-align: middle，这对flex项目不起作用。

对于弹性行项目，请在align-self-center元素上使用media-body，这与align-middle类似，即内联块元素。

原因是其父级media元素具有align-items: flex-start（顶部对齐弹性行项），因此文本中的属性：值align-self: center将使其垂直居中。

注意，h6元素有一个默认的边距，可以垂直偏移它，并修复你可以使用内置的m-0类，或者创建一个你的规则拥有.media-body h6 { margin: 0; }

Updated fiddle

Stack snippet

<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>

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

Answer 3

首先，您应为display:inline-block元素添加<li>，并使用class="text-center“对图像进行居中。然后您还应在媒体体中使用class="text-center"。

Bootstrap 4 Beta将媒体正文与中间对齐

3 个答案: