在导航栏中垂直对齐不同字体的文本

我对编码非常陌生，所以如果我的问题有明显的解决方案，我很抱歉。我试图（垂直）在我的导航栏中对齐文本，但我似乎无法使其工作。在导航栏中垂直对齐不同字体的文本

'姓名'应与'首页'，'菜单'，'关于'和'联系人'垂直对齐。任何帮助，将不胜感激！

CSS：

@charset "utf-8"; 
/* Body */ 
body { 
margin: 0; 
padding: 0; 
font-family: Roboto, sans-serif; 
} 

/* Navbar */ 
.nav { 
background-color: #FFFFFF; 
color: #000000; 
list-style: none; 
text-align: right; 
padding: 20px 0 20px 0; 
margin-top: 0; 
} 

.nav > li { 
display: inline-block; 
padding-right: 50px; 
font-size: 15px; 
} 

.nav > li > a { 
text-decoration: none; 
color: #000000; 
} 

.nav > li > a:hover { 
color: #C1C1C1; 
} 

.nav > .logo { 
color: #000000; 
float: left; 
padding-left: 25px; 
font-family: Merriweather, serif; 
font-size: 25px; 
font-weight: bold; 
line-height: 10px; 
} 

.logo > a { 
text-decoration: none; 
color: #000000; 
} 

/* Header */ 
.banner { 
width: 100%; 
display: block; 
} 

.banner > .banner-image { 
width: 100%; 
display: block; 
position: fixed; 
}

HTML：

<!doctype html> 
<html> 
<head> 
<!--- META tags --> 
<meta charset="utf-8"> 
<meta name="description" content="Pizzarestaurant de Chef in Tiel maakt    pizza's op een ambachtelijke wijze met de verste ingrediënten en bakt ze in een  echte houtgestookte steenoven!"> 
<meta name="keywords" content="pizza restaurant de chef tiel passewaay ambachtelijk steenoven lekker kwaliteit pizzadoos pizzeria"> 
<meta name="language" content="nl"> 
<meta name="viewport" content="width=initial-device-width, initial-scale=1.0"> 
<!--- CSS + Fonts --> 
<link rel="stylesheet" type="text/css" href="index-style.css"> 
<link href="https://fonts.googleapis.com/css?family=Merriweather|Roboto"  rel="stylesheet"> 
<!--- Titel --> 
<title>De Chef</title> 
</head> 
<!--- Begin body --> 
<body> 
<!--- Navbar --> 
<ul class="nav"> 
<div class="logo"> 
<a href="index.html">Name</a> 
</div> 
<li><a href="#">Home</a></li> 
<li><a href="#">Menu</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
<!--- Header --> 
<div class="banner"> 
<img class="banner-image" src="img/header.png" alt="Header"> 
</div> 
</body> 
</html>

来源

2017-02-12 Luuxter

你混合定位float和display性质在一起。 inline-block尊重基线，而浮动不。

Flexbox是比float更现代的方法。这是你如何做到这一点： http://jsfiddle.net/mdqf81da/

来源

2017-02-12 14:16:59 teadog

这个技巧。谢谢！ – Luuxter

很高兴听到它。如果你觉得自己接受这个答案（左边的绿色勾号），我会被加热到鹦鹉身上。你会是我的第一个＃poppedcherry – teadog

啊哈，我已经在试图找出如何检查评论作为答案。工作完成:) – Luuxter

您可以尝试line-height属性排列如下。

/* Body */ 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Roboto, sans-serif; 
 
} 
 
/* Navbar */ 
 

 
.nav { 
 
    background-color: #FFFFFF; 
 
    color: #000000; 
 
    list-style: none; 
 
    text-align: right; 
 
    padding: 20px 0 20px 0; 
 
    margin-top: 0; 
 
} 
 
.nav > li { 
 
    display: inline-block; 
 
    padding-right: 50px; 
 
    font-size: 15px; 
 
} 
 
.nav > li > a { 
 
    text-decoration: none; 
 
    color: #000000; 
 
} 
 
.nav > li > a:hover { 
 
    color: #C1C1C1; 
 
} 
 
.nav > .logo { 
 
    color: #000000; 
 
    float: left; 
 
    padding-left: 25px; 
 
    font-family: Merriweather, serif; 
 
    font-size: 25px; 
 
    font-weight: bold; 
 
    line-height: 10px; /*MODIFICATION*/ 
 

 
    
 
} 
 
.logo > a { 
 
    text-decoration: none; 
 
    color: #000000; 
 
}

<ul class="nav"> 
 
    <div class="logo"> 
 
    <a href="index.html">Name</a> 
 
    </div> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Menu</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
</ul>

来源

2017-02-12 13:51:43 AVI

这似乎并没有工作。我现在已经提供了完整的代码，因为可能还有其他问题导致了这个问题。 – Luuxter

在导航栏中垂直对齐不同字体的文本

回答

相关问题