Блог

Главная - Вопросы по программированию - Выравнивание начальной загрузки -средний текст не применяется в div

Выравнивание начальной загрузки -средний текст не применяется в div

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я пытаюсь выровнять текст ( <span class="align-middle">middle</span> ) по вертикали в середине div.

Это мой код:

 <div class="col-4 shadow product-added">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-5">
          <div class="row">
            <img src="<?php echo $OTHERIMAGE1; ?>" class="">
          </div>
        </div>
        <div class="col-7">
          <span class="align-middle">middle</span>
        </div>
      </div>
    </div>
  </div>
</div>

Почему текст не выравнивается должным образом?

Комментарии:

1. Попробуйте поместить класс в родительский div

2. Спасибо за проверку, уже пробовал, но безрезультатно.

Ответ №1:

Он действительно работает, но делает это внутри диапазона, потому что align-middle работает только со встроенными элементами.

Вы должны использовать его в родительском div, но с классом d-flex align-items-center

 <div class="col-7 d-flex align-items-center">

Я сохранил его в JSfiddle при добавлении высоты к строке, чтобы проверить, будет ли он работать правильно:

https://jsfiddle.net/vca42kxo/2/