Текст с определенным шрифтом не будет центрироваться в навигационной панели - PullRequest
Новая
       1

Текст с определенным шрифтом не будет центрироваться в навигационной панели

0 голосов
/ 05 июля 2018

У меня небольшая проблема с моей навигационной панелью. Я вертикально центрировал весь текст, как описано здесь . Весь текст центрируется, но только одно текстовое поле не полностью центрировано. К тексту применяется локальный шрифт ttf. Есть идеи как это исправить?

Небольшое примечание: если вы проследите текст курсором, вы увидите, что под текстом есть небольшое пустое пространство, может быть, это как-то связано с ним?

Полезная ссылка: Код проекта 

/******************************
STANDARD BLUE COLOR: #007DCF
STANDARD PURPLE COLOR: #662483
******************************/

/******************************
GENERAL
******************************/
* { 
  margin: 0;
  padding: 0; 
}
body {
  font-family: Montserrat;
}

@font-face {
	font-family: "Enter the grid";
	src: url(../fonts/Enter-The-Grid.ttf);
}

a {
  text-decoration: none;
  color: #000;
}

/******************************
HEADER + NAV
******************************/

#navbar {
  background-color: #FFF;
  position: fixed;
  width: 100%;
  top: 0;
  height: 70px;
  line-height: 70px;
  border: solid green 1px;
}

#logo {
  width: 70px;
  position: absolute;
  left: 30px;
}

#navtext {
  
}

.pull-left {
  position: absolute;
  left: 150px;
}

#logotext {
font-family: "Enter the grid";
font-size: 30px;
position: absolute !important;
padding: 0;
}

.rcolor {
  color: #007DCF;
}

#ncolor {
  color: #662483;
}

.pull-right {
  float: right;
  position: absolute;
  right: 30px;
}

li {
  display: inline;
  text-transform: uppercase;
  font-size: 15px;
  padding: 7px;
}

p {
  margin-top: 150px;
}
<nav id="navbar">
      <img id="logo" alt="Logo" src="assets/img/RND logo 4K VK - fill.png"/>
      <div id="navtext">
        <ul class="pull-left">
          <li id="logotext"><span class="rcolor">R</span><span id="ncolor">N</span><span class="rcolor">Development</span></li>
        </ul>
      
		    <ul class="pull-right">
			    <li><a href="#">Home</a></li>
          <li><a href="#">About Me</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact Me</a></li>
		    </ul>
      </div>
	  </nav>

<p>Normally, the logo is 100x100 so it fits to the navbar.</p>

Заранее спасибо!

Никманс Роб

Ответы [ 2 ]

0 голосов
/ 06 июля 2018

ОБНОВЛЕНИЕ: я сделал фотографию с PS с текстом в нем. Это сейчас исправлено.

- Тема может быть закрыта -

0 голосов
/ 05 июля 2018

Проблема заключается в заполнении вашего li, установленного на 7px. Установите для #logotext отступа 0 (как показано ниже), и все будет работать так, как вы ожидаете. 

#logotext {
   font-family: "Enter the grid";
   font-size: 30px;
   position: absolute !important;
   padding: 0;
}

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

...