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

Question

I am quite new to coding, so I am sorry if there's an obvious solution for my question. 我对编码还很陌生，所以如果对我的问题有一个明显的解决方案，对不起。 I am trying to (vertically) align text in my navigation bar, but I don't seem to be able to get it working. 我正在尝试（垂直）对齐导航栏中的文本，但似乎无法使其正常工作。

'Name' should be vertically aligned with 'Home', 'Menu', 'About' and 'Contact. “名称”应与“家庭”，“菜单”，“关于”和“联系人”垂直对齐。 Any help would be appreciated! 任何帮助，将不胜感激！

CSS: 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: 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>

Answer 1

You can try line-height property as follows for the alignment. 您可以尝试按以下方式设置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>

Answer 2

You're mixing together float and display properties for positioning. 您将float和display属性混合在一起以进行定位。 inline-block respects baselines, whereas floating doesn't. inline-block尊重基线，而浮动则不然。

Flexbox is a more modern approach than float . Flexbox是一种比float更现代的方法。 This is how you can do it: http://jsfiddle.net/mdqf81da/ 这是您的操作方法： http : //jsfiddle.net/mdqf81da/

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

问题描述

2 个解决方案

解决方案1
2 2017-02-12 13:51:43

解决方案2
0 已采纳 2017-02-12 14:16:59

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

问题描述

2 个解决方案

解决方案1 2 2017-02-12 13:51:43

解决方案2 0 已采纳 2017-02-12 14:16:59

解决方案1
2 2017-02-12 13:51:43

解决方案2
0 已采纳 2017-02-12 14:16:59