Question

我是HTML和CSS的新手，我正在制作我的第一个网站。我在项目中遇到了这个问题，但我无法找到解决问题的方法。出于某种原因，我的导航栏并不位于页面顶部。我也想知道如何将图像和文本对中，以便它与框内联。

CSS / HTML

＆＃13;

body {
	margin: 0;
	padding: 0;
	font-family: 'Arial', serif;
	background-color: #232323
}

.nav {
	background-color: #b73844;
	color: #FFFFFF;
	list-style: none;
	text-align: left
}

.nav > li {
	display: inline-block;
	padding-right: 25px;
}

.nav > li > a {
	text-decoration: none;
	color: #ffffff;
}

.nav > li > a:hover {
	color: #ffffff;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<title>AccountPanda - Home</title>
	<link rel="stylesheet" type="text/css" href="style/style.css">
</head>

<body>
	<ul class="nav">
		<a href="index.html">
  			<img src="images/logo.png" title="AccountPanda" style="width:225px;height:75px;">
		</a>	
		<li><a href="#">Accounts</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">FAQ</a></li>	
	</ul>
</body>
</html>

＆＃13;

Answer 1

vertical-align: middle和line-height: 0是您正在寻找的。

.nav > li {
    display: inline-block;
    padding-right: 25px;
    vertical-align: middle;
    line-height: 0;
}

我还用<a>包裹了保存图片的li，因此ul中的所有项目都是li：

<ul class="nav">
    <li>
      <a href="index.html">
        <img src="//placehold.it/225x75" title="AccountPanda" style="width:225px;height:75px;">
       </a> 
    </li>   
    <li><a href="#">Accounts</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">FAQ</a></li>    
</ul>

此处的Plunker演示：http://plnkr.co/edit/PUpoQcGn6qexWD1hkDKF?p=preview

Answer 2

使用flex，您可以将其对齐居中。此外，您的班级nav位于ul元素上，该元素具有默认属性，如边距，填充等。您可以覆盖它们或使用它们。见下文。

＆＃13;

/* CSS Document */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', serif;
    background-color: #232323
}

.nav {
    background-color: #b73844;
    color: #FFFFFF;
    list-style: none;
    text-align: left;
    margin: 0;
    display: flex;
    align-items: center;
    padding: 10px;
}

.nav > li {
    display: inline-block;
    padding-right: 25px;
}

.nav > li > a {
    text-decoration: none;
    color: #ffffff;
}

.nav > li > a:hover {
    color: #ffffff;
}

＆＃13;

<body>
    <ul class="nav">
        <a href="index.html">
            <img src="images/logo.png" title="AccountPanda" style="width:225px;height:75px;">
        </a>    
        <li><a href="#">Accounts</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">FAQ</a></li>    
    </ul>
</body>

＆＃13;

在导航栏中居中显示文字和图片，并将导航栏放在页面顶部

2 个答案: