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

Я добавил новые разделители меню, и теперь выравнивание моих значков социальных сетей вышло из строя. Мне нужно, чтобы они были в центре. Не знаю, почему это произошло и как это можно исправить. Я попытался добавить немного CSS, но не повезло. Мой веб-сайт http://www.stephensengineering.com/stephens33/ очень ценится за любую помощь! :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
<head> 
<title>Horizontal Navigation Bar w/Rollover Effect</title> 
<style type = "text/css"> 
<!-- 

#navbar ul { 
  height: inherit;
  /* margin: 0; REMOVE THIS*/
  margin-bottom: 0; /* Suggested */
  list-style-type: none;
  text-align: right; 
  background-color: #000; 
} 

/* Suggested for aesthetic reasons */
#navbar {
  background-color: #000;
}

#navbar ul li  {  
    display: inline-block; 
    padding: 10px 4px;
  height: inherit;
    border-left: 1px  #696969;
}

#navbar ul li a { 
     font-family: 'Montserrat';
    text-decoration: bold; 
    padding: .2em 1em; 
    color: #fff; 
    border-left:1px solid #696969
/*     background-color: #000;  */
    } 

#navbar ul li:hover { 
    background-color: #000; 
    } 
#navbar ul li:hover a { 
    color: #fff !important; 
    } 
#navbar { background-color: #000; }
    #navbar{
    position: fixed;
    z-index: 100000; /*To bring the navbar to the top of the stacking context*/
    width: 100%;
    }
    nav.stricky-fixed.fadeInDown.animated{

   top:40px; /*Since this element is already set as relative in the original code,
              the top property places the slideIn menu 40px (height of black nav menu)
              from the top of the page.*/

  }

.social-icon-wrapper:nth-child(3) a {
    border-right: 1px solid #696969;
}
    .social-icon-wrapper:hover {
  background-color: transparent !important;
}
.social-icon {
  width: 15px;
  vertical-align: top;
}

 .submit-btn {
  background-color: green !important;
    padding: .2em 1em; 
    border-left:1px dashed #696969
  }
--> 
</style> 
</head> 
<body> 
<!--  -->
<div id = "navbar"> 
  <ul class = "container"> 
      <ul>
        <li  class = "social-icon-wrapper" style = "float:left"><a href = "#about"><img class = "social-icon" src = "https://i.imgur.com/tonPA8V.png"></a></li><!--  --><li  class = "social-icon-wrapper" style = "float:left"><a href = "#about"><img class = "social-icon" src = "https://i.imgur.com/fEvitJl.png"></a></li><!--  --><li  class = "social-icon-wrapper" style = "float:left"><a href = "#about"><img class = "social-icon" src = "https://i.imgur.com/UiwMSrt.png"></a></li><!--  --><li><a href = "mailto:[email protected]">[email protected]</a></li><!--  --><li><a href = "tel:+18883000642">888-300-0642</a></li><!--  --><li><a href = "http://www.stephensengineering.com/stephens33/stephens-university/">Stephens University</a></li><!--  --><li class = "submit-btn" ><a href = "http://www.stephensengineering.com/stephens33/submit-assignment/">Submit Assignment</a></li> 
      </ul>

Добро пожаловать в Stack Overflow! Вопросы, требующие справки по коду, должны включать кратчайший код, необходимый для его воспроизведения в самом вопросе, желательно в Фрагмент стека. Хотя вы предоставили ссылку, если она станет недействительной, ваш вопрос не будет иметь значения для других будущих пользователей SO с той же проблемой. См. Что-то на моем сайте/примере не работает, могу я просто вставить ссылку.

— 12.07.2019 16:21

html css web icons alignment

12.07.2019 16:20

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

100

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

Ответы 1

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

Чтобы значки отображались по центру, расстояние между каждой границей должно быть равноудаленным. Граница применяется к левому краю отступа вашего тега anchor, поэтому слева от значка есть отступ 0,5em, но вы забыли отступ вокруг вашего элемента list, который добавит 4 пикселя между значком и последующей границей, в результате в 0.5em + 4px отступа вправо.

Проверьте свой #navbar ul li и измените отступ на padding: 10px 0px, и вы увидите, что он начинает подстраиваться. Это не полное решение, потому что я понимаю, что вам нужен этот отступ для следующего набора ссылок на панели навигации.

В вашей настройке вам необходимо учитывать заполнение тега anchor, заполнение элемента списка и ширину самой границы. Было бы лучше применить границу к элементу navbar ul li вместо внутреннего anchor элемента.

12.07.2019 17:07

Другие вопросы по теме

Эффекты наведения на веб-странице переопределяют раскрывающуюся панель навигации

Webpack-dev-server вводит CSS, а не webpack

Преобразование гамбургер-меню CSS и HTML в компонент реакции

Закрыть в любом месте sldenav оверлея

Показывать навигацию при наведении мыши

Скрытый элемент, задержка 1 сек

Обводка SVG Path только внутри или только снаружи

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

Динамическое добавление текста до и после входного значения без изменения значения

Добавить отмеченный значок в выбранные строки в DT блестящий

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

Ответы 1

Другие вопросы по теме

Похожие вопросы