Question

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

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

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>

Answer 1

您可以按照以下方式尝试line-height属性进行对齐。

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

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

2 个答案: