垂直对齐：中间不工作？

Question

为什么vertical-align: middle;不能在我的h1上工作？ ul未与h1对齐，而且应该。{/ p>

#logo {
	color: white;
	display: inline;
	vertical-align: middle;
}

ul {
	padding: 20px;
	background: rgba(0,0,0,.5);
}

#title {
	position: absolute;
	text-align: center;
	color: white;
	font-size: 50px;
	top: 100px;

}

#navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 600px;
}

li {
	float: right;
	display: inline;
}

li a {
	display: inline;
	padding: 10px 10px 10px 20px;
	text-decoration: none;
	color: white;
}

<div id="navbar">
		<ul>
			<h1 id="logo">Jordan Baron</h1>
			<li><a href="#">About Me</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Projects</a></li>
		</ul>

		<h1 id="title">Freelance Web Developer</h1>
	</div>

Answer 1

因为vertical-align仅适用于inline和table-cell元素，而不适用于块级元素。

为了让您的链接与标题对齐，您需要指定一个line-height等于标题元素的高度（35.33px）：

li {
  line-height: 35.33px;
}

＆＃13;

＆＃13;

#logo {
  color: white;
  display: inline;
  vertical-align: middle;
}

ul {
  padding: 20px;
  background: rgba(0, 0, 0, .5);
}

#title {
  position: absolute;
  text-align: center;
  color: white;
  font-size: 50px;
  top: 100px;
}

#navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: url('../img/bg.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 600px;
}

li {
  float: right;
  display: inline;
  line-height: 35.33px;
}

li a {
  display: inline;
  padding: 10px 10px 10px 20px;
  text-decoration: none;
  color: white;
}

＆＃13;

<div id="navbar">
  <ul>
    <h1 id="logo">Jordan Baron</h1>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Projects</a></li>
  </ul>

  <h1 id="title">Freelance Web Developer</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

值得注意的是，将<h1>元素作为<ul>的子元素是无效的语法。只有<li>元素才能成为<ul>的孩子。你应该做的是将标题从<ul>中取出，并将整个<ul>元素浮动到右边。

希望这有帮助！ ：）

Answer 2

准备好一点心灵翻转？

这里有FLEXBOX！这可以做得更好＆＃34;更好＆＃34;但我不想改变你的html结构：https://jsfiddle.net/ohbffjjm/

＆＃13;

＆＃13;

#navbar {
  background-color: pink;
}

#logo {
  margin-right: 150px;
  align-self: flex-start;
}

ul {
  display: flex;
  align-items: center;
  list-style-type: none;
}

li a {
  padding: 10px 10px 10px 20px;
  text-decoration: none;
  color: white;
}

＆＃13;

<div id="navbar">

  <ul>
    <h1 id="logo">Jordan Baron</h1>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Projects</a></li>
  </ul>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

一个?predict.svm解决方案，带有一些html改进和即兴创作。

＆＃13;

＆＃13;

flexbox

＆＃13;

body {
  margin: 0;
}
header {
  color: white;
  background: rgba( 0, 0, 0, 0.5 );
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

header,
ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1,
h2 {
  margin: 0.5rem 0;
}

h1 {
  padding: 0 20px;
}

h2 {
  text-align: center;
}

ul {
  padding: 0 10px;
}

li {
  padding: 10px;
}

li a {
  color: white;
  text-decoration: none;
  transition: color 350ms ease-in-out;
}
li a:hover {
  color: gold;
}

＆＃13;

＆＃13;

＆＃13;