Как горизонтально центрировать текст h1 по центру экрана, если он делит div с другим элементом (span) - PullRequest
Новая
       52

Как горизонтально центрировать текст h1 по центру экрана, если он делит div с другим элементом (span)

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

Мой HTML-код для этой части выглядит так: 

<div class="container navbar id="navbar">
     <div class="row banner">

        <span class="one-tenth column logo">
           <i class="fab fa-3x fa-cuttlefish"><a href="index.html"></a></i>
        </span>

        <h1 class="nine-tenths column"><strong>Title</strong></h1>

     </div>
</div>

пока я пробовал это в css: 

.banner{
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:25px 0;
  text-align:center;
}

Я использую свою собственную систему сетки, в которой я определил: 

.one-tenth {
  width: calc(100% /10 * 1);
}

.nine-tenths {
  width: calc(100% / 10 * 9);
}

В дополнение ко всем другим правилам, необходимым для системы координат.

Моя проблема в том, что мой h1 по-прежнему не отображается в середине экрана / баннера (ширина баннера равна 100%, поэтому его центр также будет в центре экрана).

Отображается в середине столбца, который не является серединой экрана.

Следует помнить, что h1 делит свой баннер контейнера с другим столбцом, ширина которого составляет 10%. Сам H1 - это столбец шириной 90%.

1 Ответ

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

Я думаю, что понял, что вы можете сделать, это добавить к заголовку поле вправо того же размера, что и одна десятая ширины, чтобы сделать это, вам нужно заключить заголовок в тег span 

<div class="container navbar id="navbar">
     <div class="row banner">

        <span class="one-tenth column logo">
           <i class="fab fa-3x fa-cuttlefish"><a href="index.html"></a></i>
        </span>

        <h1 class="nine-tenths column"><strong><span class="span">Title</span></strong></h1>

     </div>
</div>

и затем вам нужно добавить этот класс в CSS 

.banner .span{
  margin-right: calc(100% /10 * 1);
}

Вы можете проверить это здесь , дайте мне знать, если это вам поможет!

...