WebDev - 使用“内联块”对齐徽标文本和导航栏答案

【问题标题】：WebDev - Align Logo Text & Nav Bar Using "inline-block"WebDev - 使用“内联块”对齐徽标文本和导航栏
【发布时间】：2018-04-03 06:53:46
【问题描述】：

我是 Web 开发的新手，所以我正在摆弄 HTML / CSS。我很好奇如何将徽标/网站标题文本与导航栏对齐。几个小时以来，我一直在阅读类似问题的 SO 答案，答案似乎是使用“内联块”。但不能让它工作。基本上我希望左上角有“Marston”，右上角有我的导航栏。我希望它们垂直对齐。此外，我可以让导航栏位于右侧的唯一方法是创建一个 261 像素的巨大左边距 - 这似乎不是最佳选择。

我创建了一个https://jsfiddle.net/19n8v82w/ Fiddle 给你们看，虽然小盒子里的格式很奇怪。

非常感谢任何帮助。

#page-title {
display: inline-block;
text-transform: uppercase;
letter-spacing: 8px;
font-weight: 400;
font-size: 3rem;
margin-left: 30px;
}

【问题讨论】：

标签： html css

【解决方案1】：

如果您将此样式添加到标题并删除边距，您将获得您正在寻找的布局：

https://jsfiddle.net/euxnk73u/

header {
  display: inline-block;
}

【讨论】：

感谢您的回复。它们现在对齐到同一行，但是因为它们具有不同的字体大小 - “Marston”文本在标题框中垂直居中，但导航栏不是。我该如何解决？
@A.Marston 为此，我建议使用 flex，因为它比尝试使用 inline-block 垂直对齐元素要简单得多：{ display: flex; flex-direction: row; align-items: center; } jsfiddle.net/pj7mue30
做到了，我将对 flex 进行研究以了解其工作原理 - 但谢谢，非常感谢！

【解决方案2】：

将浮动添加到导航这是我的建议：

nav {
  display: inline-block;
   margin-right: 30px;
  margin-left: 0;
  float: right;
}

https://jsfiddle.net/o3q96gq6/1/

希望，我对您的理解正确，这正是您所需要的。

【讨论】：

感谢您的回复。这成功地将导航栏移动到右上角，但“Marston”文本和导航栏都没有对齐，也没有在标题中垂直居中。任何想法如何解决这个问题？
@A.Marston 好吧，我会以稍微不同的方式做所有事情......这是我将做的一切与屏幕匹配的示例：jsfiddle.net/o3q96gq6/28