Html 对齐此菜单的正确方法是什么？

我正在尝试将菜单与徽标对齐

我是否必须手动将其边距设置为正确对齐

还是有更好/正确的方法

因为手动边缘直到我正确对齐，感觉有点傻

*{
保证金：0；
填充：0；
}
标题{
背景色：#e58b1a；
}
标题。标志{
浮动：左；
宽度：400px；
高度：53px；
字体系列：“Arial”；
颜色：白色；
字体大小：50px；
位置：相对位置；
顶部：20px；
左：50px；
}
.菜单{
浮动：对；
字体系列：arial；
}
李先生{
/**向左浮动，使其保持水平*/
浮动：左；
/**Marigin right允许您共享链接空间*/
右边距：30px；
}

让我昏昏欲睡

我删除了位置：相对。因为它不是必需的。
添加了一些边距以便更好地对齐。 试图使li元素包裹，结果却得到了无包裹解决方案。
使链接文本方向从右向左。因此，它们会像float:right那样，粘附在屏幕的右侧，而不会破坏流量

html，正文{
保证金：0；
填充：0；
}
标题{
空白：nowrap；
背景色：#e58b1a；
最小宽度：650px；
}
标题。标志{
显示：内联块；
字体系列：“Arial”；
颜色：白色；
字体大小：50px；
填充：20px 0px 20px 20px；
}
.菜单{
显示：内联块；
方向：rtl；
字体系列：arial；
最小宽度：350px；
宽度：计算（100%-350px）；
边缘顶端：40px；
}
.菜单ul{
显示：内联；
方向：rtl；
填充：0；
}
李先生{
显示：内联；
列表样式：无；
右边距：10px；
}

让我昏昏欲睡

看起来CSS表格在这里会有所帮助

header {
  background-color: #e58b1a;
  display: table;
  vertical-align: middle;
  width: 100%;
}
header .logo {
  display: table-cell;
  height: 53px;
  font-family: 'Arial';
  color: white;
  font-size: 50px;
  vertical-align: middle;
}
.menu {
  display: table-cell;
  font-family: arial;
  text-align: right;
  vertical-align: middle;
}

*{
保证金：0；
填充：0；
}
标题{
背景色：#e58b1a；
显示：表格；
垂直对齐：中间对齐；
宽度：100%；
}
标题。标志{
显示：表格单元格；
高度：53px；
字体系列：“Arial”；
颜色：白色；
字体大小：50px；
垂直对齐：中间对齐；
}
.菜单{
显示：表格单元格；
字体系列：arial；
文本对齐：右对齐；
垂直对齐：中间对齐；
}
李先生{
显示：内联块；
}

Daz Me Lulz-为拉丁美洲儿童提供可再生能源
让我昏昏欲睡

这不是一种非常灵活的方法。如果标题的高度发生变化怎么办

这样，您就必须手动对齐填充和边距。如果您正在寻找一种更精确的方法，请查看显示元素和对齐元素的各种可能性。即使你的菜单在无序列表中。将列表视为一个表，列表项视为表单元格。如果元素从头部继承了高度，则可以很容易地在中间垂直对齐它们。这里有一个片段让你明白我的意思

html，正文{
保证金：0；
填充：0；
}
标题{
高度：108px；
背景颜色：橙色；
}
标题：之后{
明确：两者皆有；
}
导航{
身高：100%；
}
导航ul{
保证金：0；
填充：0；
浮动：左；
显示：表格；
身高：继承；
}
李海军{
显示：表格单元格；
身高：继承；
垂直对齐：中间对齐；
}
导航a{
文字装饰：无；
颜色：白色；
字体系列：“Arial”；
}
.标志a{
字体大小：50px；
填充：0 20px；
}
导航条{
浮动：对；
}
中卫，中卫巴里{
右边填充：20px；
}