Выравнивание по вертикали не идеально - PullRequest
Новая
       15

Выравнивание по вертикали не идеально

0 голосов
/ 09 января 2019

Я пытаюсь выровнять заголовок по вертикали на панели навигации.

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

Navigation panel Zoomed navigation panel

Я сделал следующее:

    1. Попробуйте: пусть flexbox вертикально выровняет H1 с равномерным распределением нижнее и верхнее поле. Я использую bootstrap 4 утилитарные классы. Тем не мение, один пиксельный разрыв все еще оставался.
    1. Попробуйте: на панели навигации явно определена высота 50px . Я попытался установить line-height для элемента H1, который равен высоте панели навигации. Поэтому, когда font-size равно 13px, я ожидал, что интервал над и под текстом будет одинаковым: 50px - 13px = 37px. Этот результат, 37px должен быть равномерно разделен между верхом и низом - 18,5px. Но как насчет половины пикселей, они работают? Проблема остается.
    1. Попробуйте: увеличьте шрифт, чтобы заполнить пробел в 1 пиксель. Так что размер шрифта установлен на 14 пикселей. 50px - 14px равняется 36px, поэтому я предполагаю, что оставшееся пространство будет равномерно распределено между верхним и нижним интервалом - 18px. Однако никаких изменений не произошло.

Вы можете заметить, что размер шрифта в 1 пиксель не соответствует физически одному пикселю.

Возможно ли вертикальное выравнивание по пиксельному совершенству для заданного пример? Может ли быть проблема с использованным шрифтом? Это проблема с движком браузера?

Фрагмент HTML 1.try: 

<nav>
      <div class="navbar navbar-expand-md p-0 pr-3 bg-dark align-items center">
            <a href="#" class="navbar-brand p-0">
                <img src="#" class="img-fluid" alt="...">
            </a>
          <div class="collapse navbar-collapse" id="navbarNav">
                <div class="navbar-nav w-100">
                    <h1 class="m-auto">
                        Air Quality Management System of the City of Olomouc
                    </h1>
                   <div class="flag-container">
                        <a class="mr-2" href="#">
                            <img class="img-fluid" src="#" alt="cs flag">
                        </a>
                        <a class="mr-2" href="#">
                            <img class="img-fluid active" src="#" alt="en flag">
                        </a>
                   </div>
               </div>
          </div>
      </div>
</nav>

Фрагмент HTML 2.try: 

<nav>
    <div class="navbar navbar-expand-md p-0 pr-3 bg-dark align-items center">
        ... abrev. ...
        <div class="collapse navbar-collapse" id="navbarNav">
            <div class="navbar-nav w-100">
                <h1 class="mx-auto my-0">
                    Air Quality Management System of the City of Olomouc
                </h1>
              ... abrev. ...
            </div>
        </div>
    </div>
</nav>

Фрагмент CSS: Дополнительные правила CSS, которые я добавил, остальные неявно взяты из начальной загрузки 4. 

nav .navbar-brand img {
    max-height: 50px;
    padding-left: .25rem;
    background-color: #f10;
}

nav h1 {
    color: #fff;
    font-size: 13px;
    font-size: .8125rem;
    font-family: 'Hind';
    letter-spacing: .15px;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
}

Фрагмент CSS для 2. try: Я добавил высоту строки, равную высоте панели навигации 

nav h1 {
  color: #fff;
  font-size: 13px;
  font-size: .8125rem;
  font-family: 'Hind', sans-serif;
  letter-spacing: .15px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 50px;
 }

Ответы [ 2 ]

0 голосов
/ 09 января 2019

Не уверен, что вы уже используете flexbox (из-за класса d-flex), но если это так, вы можете использовать свойство align-items: center для выравнивания содержимого.

Например: 

.navbar-nav {
  display: flex;
  align-items: center;
  background: #000;
}
.navbar-nav h1 {
  color: #fff;
  font-size: .8125rem;
  font-family: 'Hind', sans-serif;
  letter-spacing: .15px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 50px;
 }
<div class="navbar-nav d-flex w-100">
  <h1 class="m-auto">
    Air Quality Management System of the City of Olomouc
  </h1>
  <div class="flag-container">
    ...
  </div>
</div>
0 голосов
/ 09 января 2019

У вас есть навигация h1. Должно быть h1{ или .m-auto h1{ или .navbar-nav h1. Для центрирования текста выполните: 

.navbar-nav h1 {
  ... your code ...
  vertical-align: middle;
 }
...