css - 如何在 Bootstrap 4 中水平居中媒体对象的内容

Question

我有一个模态窗口，它在媒体对象中显示带有对话气泡的图像，如下所示：

.profile {
  max-width: 7em;
}

.speech {
  color: #808080;
  position: relative;
  background: #f1f1f1;
  border: 1px solid #efefef;
  border-radius: 3px;
  padding: 15px;
}

.speech::after {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background: #f1f1f1;
  border: 1px solid #efefef;
  border-width: 0 0 1px 1px;
  position: absolute;
  left: -8px;
  bottom: 20px;
  transform: rotateZ(-46deg);
}

.close {
  position: absolute;
  right: 20px;
}

.media img {
  margin-right: 30px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title col-12 text-center" id="exampleModalLabel">Modal Title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="media">
          <img class="profile rounded-circle align-self-center" src="https://blackrockdigital.github.io/startbootstrap-landing-page/img/testimonials-1.jpg">
          <p class="speech align-self-end">
            Blah blah blah.
          </p>
        </div>
      </div>
    
    </div>
  </div>
</div>
    
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

此代码导致图像和语音气泡相对于其父媒体对象显示为左对齐。

如何使图像和语音气泡在媒体对象中居中显示？

标签： cssflexboxbootstrap-4alignment

Answer 1

您可以将此规则添加到 CSS 以将 flex 项置于其容器内的中心：

.media {
  justify-content: center;
}

.profile {
  max-width: 7em;
}

.speech {
  color: #808080;
  position: relative;
  background: #f1f1f1;
  border: 1px solid #efefef;
  border-radius: 3px;
  padding: 15px;
}

.speech::after {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background: #f1f1f1;
  border: 1px solid #efefef;
  border-width: 0 0 1px 1px;
  position: absolute;
  left: -8px;
  bottom: 20px;
  transform: rotateZ(-46deg);
}

.close {
  position: absolute;
  right: 20px;
}

.media img {
  margin-right: 30px;
}
.media {
  justify-content: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title col-12 text-center" id="exampleModalLabel">Modal Title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="media">
          <img class="profile rounded-circle align-self-center" src="https://blackrockdigital.github.io/startbootstrap-landing-page/img/testimonials-1.jpg">
          <p class="speech align-self-end">
            Blah blah blah.
          </p>
        </div>
      </div>
    
    </div>
  </div>
</div>
    
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>