Значок меню по вертикали - PullRequest
Новая
       15

Значок меню по вертикали

0 голосов
/ 03 декабря 2018

Значок меню class = "fa fa-bar" в навигационной панели этой страницы: https://www.theairlinepilots.com/tapforum/forum-header.php не выровнен по вертикали при просмотре в браузере Chrome мобильного телефона, но выровнен по вертикали при просмотре нанастольный браузер Chrome.Попробовал множество комбинаций, заключив его в элементы div и используя значения -ve margin для компенсации эффекта с плавающей запятой, но безуспешно.Как я могу правильно выровнять его по вертикали для всех браузеров.Благодарю.HTML 

<div class="tap-navbar" id="my-tap-navbar">
  <a href="https://www.theairlinepilots.com/index.php" class="active">About</a>
  <a href="https://www.theairlinepilots.com/index.php">Forums</a>
  <a href="https://www.theairlinepilots.com/index.php">Flight Planning</a>
  <a href="https://www.theairlinepilots.com/index.php">Apps</a>
  <a href="https://www.theairlinepilots.com/membership-subscription.php">Membership</a>
  <a href="https://www.theairlinepilots.com/admincontact.php">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars" style="color:#ffffff;vertical-align:middle;">
</a></i>
</div>

CSS 

.tap-navbar {
font-family: Courier, Verdana, sans-serif, arial;
overflow: hidden;
background-color: #006699;
border-radius:0px 0px 5px 5px;
margin-bottom:5px;
    background: #005580;
    background: linear-gradient(#005580,#0077b3);
    background: -moz-linear-gradient(#005580, #0077b3); 
    background: -webkit-linear-gradient(#005580, #0077b3);  
    background: -o-linear-gradient(#005580, #0077b3);
    background: -ms-linear-gradient(#005580, #0077b3);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #005580),color-stop(0, #0077b3));    
vertical-align:middle;
}

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

ок, понял, что с кодом все в порядке.Проблема заключалась в конфликте с форумом phpbb с тем же именем класса 'icon'.Переименование .icon в моем коде решило проблему.

0 голосов
/ 03 декабря 2018

Я не эксперт по CSS, но вы можете применить следующее решение: 

<i class="fa fa-bars" style="color:#ffffff; vertical-align:middle; height: 16px;">

Это означает добавить свойство высоты.Кроме того, рекомендуется использовать тег <em> вместо <i>.Читать дальше https://www.w3.org/International/questions/qa-b-and-i-tags

...