bootstrap v3.3.6 - вертикальное выравнивание содержимого в столбце начальной загрузки - PullRequest
Новая
       12

bootstrap v3.3.6 - вертикальное выравнивание содержимого в столбце начальной загрузки

0 голосов
/ 21 ноября 2018

Я использую bootstrap v3.3.6 и пытаюсь выровнять 'My Link' по центру по вертикали.Есть ли какой-нибудь класс для этого?

Попробовал это, у меня не получилось выравнивание по вертикали с Bootstrap 3 

<li class="list-group-item">  
   <div class="row">
        <div class="col-md-8">
            <b>Some Title</b>
            <br>
            Some details some details some details some details
        </div>
        <div class="col-md-4">
            <a id="my-link">My link</a>
        </div>
    </div>
</li>

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Другой альтернативой для вертикального центрирования является использование свойства CSS display: flex; в сочетании с align-items: center;.Вы можете проверить следующий пример. 

.fixed-h {
    height: 100px;
}

.vcenter-flex {
    display: flex;
    align-items: center;
}

.hcenter-flex {
    display: flex;
    justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<li class="list-group-item">  
  <div class="row">
    <div class="col-md-8 fixed-h bg-info">
      <b>Some Title</b>
      <br>
      Some details some details some details some details
    </div>
    <div class="col-md-4 fixed-h vcenter-flex hcenter-flex bg-warning">
      <a id="my-link">My link</a>
    </div>
  </div>
</li>

Для вертикального центрирования родительские элементы должны иметь определенную высоту, что является целью класса fixed-h, который вы видите в стилях.Также для справки я сделал горизонтальное центрирование для режима flex: hcenter-flex.Наконец, цвета фона применяются только для ссылки на пределы контейнеров.

0 голосов
/ 21 ноября 2018

Можно попробовать использовать display: table и display: table-cell. 

.col-xs-8, .col-xs-4 {
  height: 60px;
}

.d-table {
  display: table;
  height: 100%;
}

.d-table-cell {
  display: table-cell;
}

.align-middle {
  vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<li class="list-group-item">
   <div class="row">
      <div class="col-xs-8">
            <b>Some Title</b>
            <br>
            Some details some details some details some details
        </div>
        <div class="col-xs-4">
            <div class="d-table">
              <div class="d-table-cell align-middle">
                <a id="my-link">My link</a>
              </div>
            </div>            
        </div>
    </div>
</li>

display: table требуется свойство height: value.Затем display: table-cell будет использовать это значение высоты с vertical-align: middle.

В этом примере .col-xs-8 и .col-xs-4 имеют одинаковое значение высоты: 60px.

P /S: Я изменил .col-md-8 и .col-md-4 на .col-xs-8 и .col-xs-4, чтобы соответствовать содержанию на этом сайте.

...