Question

我刚开始学习HTML / CSS。我正在玩创建导航栏。我一直在测试带有徽标的导航栏，然后是水平导航（自定义，而不是使用Bootstrap）。

我的代码似乎总是使徽标和导航在中间垂直对齐。这实际上是我想要的 - 但我不明白为什么会这样做，因为我认为vertical-align将是基线，除非另有设置。

我创建了三个替代标题：

徽标垂直对齐基线
徽标垂直对齐中间
没有垂直对齐集（我使用内联CSS设置了vertical-align值）。

选项（2）和（3）看起来一样......我不知道为什么。对于有人指出我遗漏的显而易见的东西，我感到非常高兴......

.container {
    background-color: #f8f8f8;
}

.header ul {
    padding: 0;
    margin: 0;
    display: inline-block;
}

.header li {
    display: inline;
}
	
.header a {
    display: inline-block;
    color: grey;
    text-decoration: none;
    padding: 20px 30px;
}

.header a:hover {
    color: black;
}

.active a {
    background-color: #e7e7e7;
}

.header img {
    margin: 0px 20px;
}

<html>
<head>
<title>Header Test</title>

<!--External CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat+Alternates:700' rel='stylesheet' type='text/css'>	

</head>

<body>
<h2>Logo aligned > baseline</h2>
<div class="header">
    <div class="container">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/logo.svg" style="vertical-align: baseline;" height="30" width="30">
        <ul>
	    <li class="active"><a href="#">Home</a></li>
	    <li><a href="#">Page 1</a></li>
	    <li><a href="#">Page 2</a></li>
	    <li><a href="#">Page 3</a></li>
	</ul>
    </div>
</div>

<div style="height: 20px;"></div>
<h2>Logo aligned > middle</h2>
<div class="header">
    <div class="container">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/logo.svg" style="vertical-align: middle;" height="30" width="30">
        <ul>
	    <li class="active"><a href="#">Home</a></li>
	    <li><a href="#">Page 1</a></li>
	    <li><a href="#">Page 2</a></li>
	    <li><a href="#">Page 3</a></li>
	</ul>
    </div>
</div>

<div style="height: 20px;"></div>
<h2>No alignment set</h2>
<div class="header">
    <div class="container">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/logo.svg" height="30" width="30">
        <ul>
	    <li class="active"><a href="#">Home</a></li>
	    <li><a href="#">Page 1</a></li>
	    <li><a href="#">Page 2</a></li>
	    <li><a href="#">Page 3</a></li>
	</ul>
    </div>
</div>

</body>

</html>

垂直对齐：默认值

0 个答案: