在使用ul > li布局时，子元素垂直居中常常成为棘手问题。本文将通过一个案例分析，讲解导航按钮垂直居中失效的原因，并提供有效的解决方案。
问题：导航按钮无法垂直居中
案例中，页面采用浮动布局，包含图片区、文字信息区和导航按钮区。然而，导航按钮并未垂直居中，而是位于右侧区域顶部。这是因为浮动布局导致元素高度不一致。代码如下：
导航
对应CSS样式：
立即学习“前端免费学习笔记（深入）”；
.body .shoplist ul {
list-style: none;
}
.body .shoplist ul li .left {
padding: 0.2rem;
width: 26%;
float: left;
}
.body .shoplist ul li .middle {
width: 50%;
float: left;
padding-left: 0.1rem;
}
.body .shoplist ul li .middle .title {
font-size: 1rem;
font-weight: bold;
line-height: 2rem;
display: block;
float: left;
}
.body .shoplist ul li .middle .content {
line-height: 1.5rem;
color: #CCCCCC;
display: block;
float: left;
}
.body .shoplist ul li .middle .other {
line-height: 1.5rem;
color: #CCCCCC;
display: block;
float: left;
}
.body .shoplist ul li .right {
text-align: center;
width: 20%;
float: left;
}
原因分析：浮动布局导致高度不一致
由于使用了float: left，子元素脱离文档流，高度相互独立。图片高度和文字内容高度不同，导致右侧区域高度由按钮决定，按钮自然无法垂直居中。
解决方案：拥抱Flexbox或Grid布局
建议放弃浮动布局，采用更现代化的Flexbox或Grid布局。它们能更有效地控制元素对齐，避免浮动布局的诸多问题。 浮动元素脱离文档流，导致高度不一致是其固有特性。 未设置高度，元素高度由内容撑开，导致高度不一致也是正常现象。 使用Flexbox或Grid可以轻松解决这个问题。
