Question

我的导航栏有点问题。我已按照 here的说明将所有文本垂直居中。所有文本均居中，但只有一个文本框未完全居中。文本已应用本地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>

谢谢！

Nickmans Rob

Answer 1

问题是您的li的填充，设置为7px。将您的#logotext填充设置为0（如下所示），一切都会按预期进行。

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

您至少应该尝试检查页面的元素，并查看可能发生的情况。

Answer 2

更新：我用PS制作了一张带有文字的照片。现在已修复。

-主题可以关闭-

特定字体的文本不会在导航栏中居中

2 个答案: