我一直在阅读 float 已过时的文章，使用内联 block 可以解决诸如必须使用 clearfix 等问题。这些文章继续通过展示相同的示例来证明内联 block 的合理性:三个正方形居中对齐。在尝试使用内联 block 创建导航栏时，我遇到了很多问题。我的导航栏布局如下所示:
<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>
为了将 Logo 左对齐并将导航栏切换按钮右对齐，我不得不使用文本对齐对齐和一些特殊标记，我发现它们与 clearfix ( Align two inline-blocks left and right on same line ) 一样突兀:
.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 的非常相似。在小屏幕尺寸下，我希望我的导航栏切换按钮位于导航栏区域的中央。但是，垂直对齐:中间会将此按钮与我的 Logo 中间对齐，该 Logo 将比导航栏短或高，并且我也希望与导航栏的顶部对齐。内联 block 不允许我将我的内容垂直对齐到父容器，这似乎使其成为许多布局中不可行的选项。是否有某种解决方案可以让我的内容与容器而不是同级元素对齐？我一直在尝试设置不同的行高和垂直对齐方式。
最佳答案
如果您遵循了上面的评论，就会有很多问题被问到。我会尽量总结其中的大部分内容。
对于 display:inline-block , vertical-algin属性只影响元素本身的位置，以及相对于 sibling (尤其是最高的 sibling )的位置。
百分比高度像height:100% , 仅适用于父容器的固定高度，或一直设置为 <html> 的所有百分比高度标签。但不包括定位( relative 、 absolute 等)元素和视口(viewport)单元 vh ，也许还有其他一些情况。
对于 display:table-cell , vertical-algin属性影响所有子元素，再次排除一些定位元素。
我认为 CSS 表格是在这种情况下完成所需布局的最简单方法。因为您可以轻松地在其上设置垂直和水平对齐方式。这是一个简化的解决方法。
.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>关于css - 内联 block 挑战和布局建议，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30823680/