Создайте заголовок в Bootstrap 4 с правильно выровненным логотипом - PullRequest
Новая
       6

Создайте заголовок в Bootstrap 4 с правильно выровненным логотипом

0 голосов
/ 14 сентября 2018

Я пытаюсь создать заголовок в начальной загрузке 4 следующим образом: Header with Logo on the left side that is pulled to the bottom of the h1 element. It contains the text Some text in big letters with smaller letters saying Я сталкиваюсь с несколькими проблемами с этим подходом.Во-первых, логотип не центрирован по центру.Я попробовал несколько методов, чтобы избежать этого, включая align = middle, margin снизу (который добавляет больше места снизу, чем пространство, которое уже находится на верхней стороне) и систему сетки с col-1 и col-9.Последнее создает много места между логотипом и заголовком.

Изображение включает версию, которая содержит изображение в элементе HTML h1.Вот источник для создания логотипа:

<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64 />Some text 
<small class="text-white-50">
The new way of doing text-research</small></h1>
Я что-то не так делаю?Примеры начальной загрузки с включенным логотипом очень редки.Возможно, у него есть причина ...

Дополнительная информация

  • Мелкий текст не должен быть центрирован.
  • Я хочу достичьэто только с утилитами начальной загрузки .

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Поскольку html не опубликован, я собираюсь предположить, что у вас есть основы начальной загрузки:

Предполагается, что у вас есть что-то вроде этого 

<div class="container-fluid">
     <div class="row">
          <div class="col-lg-12 header">
            <span>
               <h1 class="display-4 bg-primary text-light">
                 <img src="https://via.placeholder.com/64x64" width=64 height=64/>
                 some text
                <small>The new way of doing text-research</small>
              </h1>
            </span>
          </div>
     </div>
</div>

РЕДАКТИРОВАТЬ: УДАЛЕНО ПОЛЬЗОВАТЕЛЬСКИМ CSS

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

Я надеюсь, что это то, что вы ищете.

Проверить обновленный код ручки https://codepen.io/Jsilvestri/pen/vzzJRy

0 голосов
/ 14 сентября 2018

Используйте flexbox для всех предметов. Не помещайте изображение и текст в h1. 

div {
  display: flex;
  align-items: center/* vertical alignment */
}

small {
  font-size: 1rem;
}
<div>
  <img src="https://via.placeholder.com/64x64" width=64 height=64 />
  <h1 class="display-4 bg-primary text-light">Some text<small class="text-white-50">The new way of doing text-research</small></h1>

</div>
...