Html 垂直对齐：中间不工作？

为什么

垂直对齐：中间我的h1不工作？
ul
与
h1
不对齐，应该对齐


#徽标{
颜色：白色；
显示：内联；
垂直对齐：中间对齐；
}
保险商实验室{
填充：20px；
背景：rgba（0,0,0,5）；
}
#头衔{
位置：绝对位置；
文本对齐：居中；
颜色：白色；
字体大小：50px；
顶部：100px；
}
#导航栏{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景图片：url（'../img/bg.jpg'）；
背景重复：无重复；
背景大小：100%100%；
高度：600px；
}
李{
浮动：对；
显示：内联；
}
李阿{
显示：内联；
填充：10px 10px 10px 20px；
文字装饰：无；
颜色：白色；
}


约旦男爵




自由网站开发者
因为
垂直对齐
仅适用于
内联
和
表格单元格
元素，而不适用于块级元素

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


#徽标{
颜色：白色；
显示：内联；
垂直对齐：中间对齐；
}
保险商实验室{
填充：20px；
背景：rgba（0,0,0,5）；
}
#头衔{
位置：绝对位置；
文本对齐：居中；
颜色：白色；
字体大小：50px；
顶部：100px；
}
#导航栏{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景图片：url（'../img/bg.jpg'）；
背景重复：无重复；
背景大小：100%100%；
高度：600px；
}
李{
浮动：对；
显示：内联；
线高：35.33px；
}
李阿{
显示：内联；
填充：10px 10px 10px 20px；
文字装饰：无；
颜色：白色；
}


约旦男爵




自由网站开发者
准备好了吗

FLEXBOX来了！这可以做得“更好”，但我不想更改您的html结构：


#导航栏{
背景颜色：粉红色；
}
#标志{
右边距：150px；
自我校准：灵活启动；
}
保险商实验室{
显示器：flex；
对齐项目：居中；
列表样式类型：无；
}
李阿{
填充：10px 10px 10px 20px；
文字装饰：无；
颜色：白色；
}


约旦男爵




和一个
flexbox
解决方案，其中包含一些html改进和改进


正文{
保证金：0；
}
标题{
颜色：白色；
背景：rgba（0,0,0,0.5）；
}
ul，
李{
保证金：0；
填充：0；
列表样式：无；
}
标题，
保险商实验室{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
h1，
氢{
保证金：0.5雷姆0；
}
h1{
填充：0 20px；
}
氢{
文本对齐：居中；
}
保险商实验室{
填充：0 10px；
}
李{
填充：10px；
}
李阿{
颜色：白色；
文字装饰：无；
过渡：颜色350ms，易于输入输出；
}
李娜：停下来{
颜色：金色；
}

约旦男爵





自由网站开发者
（1）你不应该把
h1
作为
ul
的孩子。（2） 仅适用于内联级别和表格单元格元素。通常每页只有on
h1
。从语义上讲，把你的名字放在那个无序的列表中没有任何意义。那么我应该用什么来代替呢？例如，一个带类的div而不是multiple
h1
？如果合适，可以将第二个设置为
h2
，或者使用
div
。
li {
  line-height: 35.33px;
}