右浮动的button按钮如何设置vertical-align实现垂直对齐

问题原因 #

vertical-align 属性仅对行内元素、行内块元素或者table单元格元素生效。你之前的配置没有生效，是因为右浮动元素会脱离常规文档流，vertical-align 对浮动元素不生效，同时父容器也没有对应的垂直对齐配置。

解决方案（推荐Flex布局，适配性最强） #

只需要修改两处CSS即可实现预期效果：

1. 给列表容器.justified-list新增Flex布局配置，实现子元素自动垂直对齐：

.justified-list {
  padding: 5px;
  width: 100%;
  margin: 0;
  /* 新增以下3行代码 */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

2. 修改右对齐项.last的配置，删除原有浮动属性，用自动边距实现靠右对齐：

.last {
  /* 删除原有 float: right; 规则 */
  margin-left: auto;
}

效果说明 #

修改后所有列表项会默认在同一行排列，align-items: center 会让所有子项自动沿垂直方向居中对齐，margin-left: auto 会自动填充左侧剩余空间，把按钮项推到容器最右侧。如果需要调整前两个列表项之间的间距，给第二个.jl-item新增margin-right: 15px这类规则自行调整即可。

备用方案（不修改原有浮动逻辑） #

如果你不想改动现有浮动结构，可以通过固定行高实现对齐，适配性比Flex方案弱：

.jl-item {
  padding: 10px;
  display: block;
  line-height: 24px; /* 新增，数值可根据你的字体大小调整 */
}
.btn-hent-pass {
  color: #b20c1c;
  text-decoration: none;
  vertical-align: middle; /* 新增 */
}

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