Bootstrap выравнивает текст и изображение

Я пытаюсь встроить div в карточную коробку и тоже это делаю. Но текст располагается вертикально по центру рядом с. не удается заставить текст начинать вверх.

<div class = "card text-left">
       <div class = "card-header">
           <ul class = "nav nav-tabs card-header-tabs">
                 <li class = "nav-item">
                   <a class = "nav-link active" href = "#">Active</a>
                 </li>
                 <li class = "nav-item">
                     <a class = "nav-link" href = "#">Link</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link disabled" href = "#">Disabled</a>
                                </li>
               </ul>
            </div>
         <div class = "card-body">
      <div class = "d-inline"><img src = "{{$estate->image}}" id = "image"></div>
    <div class = "d-inline">{{$estate->building_name}}</div>
 </div>
</div>

Попробуйте использовать d-inline, чтобы изображение и текст располагались рядом. Но на этот раз текст выравнивается по вертикали.

Используйте jsfiddle.net, чтобы визуализировать это. А в чем проблема ?.

— 07.01.2019 02:28

jsfiddle.net/ubvanw93/3 здесь. вы можете видеть, что текст расположен вертикально, как мне сделать так, чтобы он начинался сверху.

— 07.01.2019 02:32

Какой результат вы хотите?

— 07.01.2019 02:38

html css bootstrap-4

07.01.2019 02:18

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны использовать d-inline-flex и align-top

<div class = "card-body">
    <div class = "d-inline-flex"><img src = "{{$estate->image}}" id = "image"></div>
    <div class = "d-inline-flex align-top">{{$estate->building_name}}</div>
</div>

@Barbie Добро пожаловать)

— 07.01.2019 02:51

07.01.2019 02:46