如何创建水平排列的div，部分居右且实现垂直对齐？

问题的核心很明确：浮动元素会脱离正常的文档流，所以你给header > div设置的display: inline-block、height: 100%和vertical-align: middle规则，对那些加了float: right的Div完全不起作用——它们根本不在正常的文档流里，自然不会遵循这些对齐规则，只会默认贴在容器顶部。

下面给你两种可行的解决方案，优先推荐第一种现代布局方案：

方案一：使用Flex布局（推荐） #

Flex布局是目前处理这类对齐问题最简洁高效的方式，完全不需要依赖浮动，直接通过容器的属性就能实现水平排列+垂直居中+部分元素靠右的需求。

修改后的代码： #

HTML：

<header>
  <div><h1>Title</h1></div>
  <div>Blah1</div>
  <div>Blah2</div>
  <div>Blah3</div>
  <div>Blah4</div>
</header>

CSS：

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: lightgray;
  border-bottom: 5px solid gray;
  /* 启用Flex布局 */
  display: flex;
  /* 让所有子元素垂直居中 */
  align-items: center;
  /* 给容器加左右内边距，避免内容贴边 */
  padding: 0 10px;
}

header > div {
  padding: 10px;
}

/* 给需要靠右的元素设置margin-left:auto，将其及后续元素推到最右侧 */
header > div:nth-last-child(2),
header > div:last-child {
  margin-left: auto;
}

原理说明： #

• display: flex让header变成flex容器，所有直接子元素自动成为flex项，默认水平排列；
• align-items: center强制所有flex项在垂直方向上居中；
• margin-left: auto是Flex布局的实用技巧：它会自动占据容器中剩余的所有空间，把当前元素及后面的元素推到容器的最右侧，完美实现“部分元素靠右”的需求。

方案二：兼容旧浏览器的浮动容器包裹法 #

如果需要兼容IE9及更早的浏览器，可以把所有靠右的Div包裹在一个父容器里，让这个父容器参与正常文档流并垂直居中，再给父容器设置浮动：

修改后的代码： #

HTML：

<header>
  <div><h1>Title</h1></div>
  <div>Blah1</div>
  <div>Blah2</div>
  <div class="right-group">
    <div>Blah3</div>
    <div>Blah4</div>
  </div>
</header>

CSS：

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: lightgray;
  border-bottom: 5px solid gray;
  /* 必须给header设置明确高度，否则子元素的height:100%无效 */
  height: 60px;
}

header > div {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  padding: 10px;
}

.right-group {
  float: right;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.right-group > div {
  display: inline-block;
  padding: 10px;
}

原理说明： #

• 把靠右的元素统一放在right-group容器里，让这个容器作为整体参与正常文档流，这样vertical-align: middle就能生效，实现垂直居中；
• 给right-group设置float: right，让整个容器靠右，里面的子元素自然也跟着靠右排列。

内容的提问来源于stack exchange，提问作者user4385532