我一直在阅读浮点数过时的文章，使用内联块可以解决诸如必须使用clearfix等问题。这些文章继续通过展示相同的示例来证明内联块的合理性：中间对齐的三个正方形。在尝试使用内联块创建导航栏时，我遇到了许多问题。我的导航栏布局如下所示：
<nav id="main-nav" class="navbar">
<div class="logo">
<!-- image -->
</div><!--
--><div class="navbar-header"><!--
--><button type="button" class="navbar-toggle closed">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
</div>
<div class="navbar-collapse navbar-sidebar">
<ul class="navbar-nav">
<!-- list-items -->
</ul>
</div>
</nav>
为了将徽标左对齐，导航栏切换按钮向右对齐，我不得不使用文本对齐对齐和一些特殊标记，我觉得这和clearfix一样突兀（在同一行上左右对齐两个内联块）：
.header {
text-align: justify;
/* ie 7*/
*width: 100%;
*-ms-text-justify: distribute-all-lines;
*text-justify: distribute-all-lines;
}
.header:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
.logo {
display: inline-block;
vertical-align: top;
}
.navbar-header {
display: inline-block;
vertical-align: middle;
}
我的导航栏与Bootstrap的非常相似。在较小的屏幕尺寸下，我希望我的导航栏切换按钮在导航栏区域中居中。垂直对齐：但是，中间会将此按钮与我的徽标中间对齐，该徽标将比导航栏短或高，并且我还希望将其对齐到导航栏的顶部。内联块不允许我将内容垂直对齐到父容器，这似乎使其成为许多布局中不可行的选项。是否有某种解决方案可以将我的内容与容器对齐，而不是同级元素？我一直在尝试设置不同的行高和垂直对齐方式。
如果您关注了上面的评论，就会提出很多问题。我将尝试总结其中的大部分内容。
对于display:inline-block，vertical-algin属性只影响元素本身的位置，并且相对于同级（尤其是最高的同级）的位置。
百分比高度（如 height:100% ）仅适用于父容器的固定高度，或一直设置回<html>标签的所有百分比高度。但不包括定位（relative、absolute等）元素和视口单位vh，也许还有其他一些情况。
对于display:table-cell，vertical-algin属性会影响所有子元素，同样排除一些定位的子元素。
我认为在这种情况下，CSS 表是完成所需布局的最简单方法。因为您可以轻松地在其上设置垂直和水平对齐方式。这是一个简化的解决方法。
JsFiddle 演示
.nav {
border: 1px solid red;
display: table;
width: 100%;
}
.nav > div {
display: table-cell;
vertical-align: middle;
}
.logo img {
display: block;
}
.menu {
text-align: right;
}
.menu span {
border: 1px solid blue;
}<div class="nav">
<div class="logo">
<img src="//dummyimage.com/50"/>
</div>
<div class="menu">
<span>Menu</span>
</div>
</div>