Невозможно вертикальное центрирование носителя Bootstrap 3 - PullRequest
Новая
       8

Невозможно вертикальное центрирование носителя Bootstrap 3

0 голосов
/ 04 октября 2018

Я пытаюсь центрировать медиаобъект изображения Bootstrap 3 с левой стороны строки.Таким образом, я использую функцию pull-left, чтобы CSS перемещал изображение влево, но я не могу отцентрировать это изображение в самой строке, несмотря на то, что пробую все рекомендуемые стратегии онлайн.

Вот фрагмент кода того, чтоЯ говорю о:

https://jsfiddle.net/afoxprogramming/aq9Laaew/242135/

Можно ли вертикально расположить эти изображения-заполнители в пределах их ряда таким образом, чтобы было пространство над и под изображениями, высота которых не равнатак же, как текст в соответствующей строке?Ниже приведены некоторые из HTML: 

<div class="row">
  <div class="col-xs-12">
    <div class="media">
      <img class="pull-left img-responsive index-page-list-image" src="https://via.placeholder.com/157x20"style="max-width: 33.33%">
      <div class="media-body">
      <p class=""><strong>Volunteering</strong></p>
      <p>Test text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text.</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12">
    <div class="media">
      <img class="pull-left img-responsive index-page-list-image" src="https://via.placeholder.com/300x100" style="max-width: 33.33%">
      <div class="media-body">
        <p class=""><strong>Volunteering</strong></p>
        <p>Test text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text.</p>
      </div>
    </div>
  </div>
</div>

и соответствующие CSS: 

.index-page-list-image {
  width: 100%;
}

Ответы [ 3 ]

0 голосов
/ 04 октября 2018

вам нужно использовать align-items: center;, так что лучше создайте новый класс и примените его вместо него media class 

.media-center{
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}

см. jsfiddle 

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.index-page-list-image {
  width: 100%;
}
.media-center{
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
<div class="row">
  <div class="col-xs-12">
    <div class="media media-center">
      <img class="pull-left img-responsive index-page-list-image" src="https://via.placeholder.com/157x20"style="max-width: 33.33%">
      <div class="media-body">
        <p><strong>Volunteering</strong></p>
        <p>Test text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text.</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12">
    <div class="media media-center">
      <img class="pull-left img-responsive index-page-list-image" src="https://via.placeholder.com/300x100" style="max-width: 33.33%">
      <div class="media-body">
        <p><strong>Volunteering</strong></p>
        <p>Test text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text.</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12">
    <div class="media media-center">
      <img class="pull-left img-responsive index-page-list-image" src="https://via.placeholder.com/57x35" style="max-width: 33.33%">
      <div class="media-body">
        <p><strong>Volunteering</strong></p>
        <p>Test text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text.</p>
      </div>
    </div>
  </div>
</div>
0 голосов
/ 04 октября 2018

Обновление CSS класса .media с align-items: flex-start до align-items: center устранит проблему.пожалуйста, посмотрите на приведенный ниже рабочий фрагмент.

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<style>
  .row {
    background: #f8f9fa;
    margin-top: 20px;
  }
  .media {
    -ms-flex-align: start;
    align-items: center;
  }
  .index-page-list-image {
    width: 100%;
  }
</style>

<div class="row">
  <div class="col-xs-12">
    <div class="media">
      <img class="pull-left img-responsive index-page-list-image" src="https://via.placeholder.com/157x20" style="max-width: 33.33%">
      <div class="media-body">
        <p class=""><strong>Volunteering</strong></p>
        <p>Test text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text.
          Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text.
          Test text. Test text. Test text. Test text.</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12">
    <div class="media">
      <img class="pull-left img-responsive index-page-list-image" src="https://via.placeholder.com/300x100" style="max-width: 33.33%">
      <div class="media-body">
        <p class=""><strong>Volunteering</strong></p>
        <p>Test text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text.
          Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text.
          Test text. Test text. Test text. Test text.</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12">
    <div class="media">
      <img class="pull-left img-responsive index-page-list-image" src="https://via.placeholder.com/57x35" style="max-width: 33.33%">
      <div class="media-body">
        <p class=""><strong>Volunteering</strong></p>
        <p>Test text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text.
          Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text.
          Test text. Test text. Test text. Test text.</p>
      </div>
    </div>
  </div>
</div>
0 голосов
/ 04 октября 2018

Просто удалите align-items: flex-start;и добавьте следующее, и все готово ... 

.media {
    align-items: center;
}
...