在导航栏中垂直对齐具有不同字体大小的文本答案

【问题标题】：Vertically align text with different font sizes in navigation bar在导航栏中垂直对齐具有不同字体大小的文本
【发布时间】：2017-06-30 12:11:32
【问题描述】：

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

“姓名”应与“主页”、“菜单”、“关于”和“联系方式”垂直对齐。任何帮助将不胜感激！

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>

【问题讨论】：

标签： html css text alignment

【解决方案1】：

您可以尝试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>

【讨论】：

这似乎不起作用。我现在提供了我的完整代码，因为可能是其他原因导致了问题。

【解决方案2】：

您将float 和display 属性混合在一起以进行定位。 inline-block 尊重基线，而浮动则不。

Flexbox 是一种比float 更现代的方法。您可以这样做： http://jsfiddle.net/mdqf81da/

【讨论】：

很高兴听到这个消息。如果您愿意接受作为答案，我会对鸟蛤感到温暖（左侧的绿色勾号）。你会是我的第一个#poppedcherry
啊哈，我已经在尝试找出如何检查评论作为答案。任务完成:)
谢谢，感激 :)