CSS布局中导航按钮如何垂直居中？

本文针对CSS布局中导航按钮垂直居中失效问题进行详细分析。在使用ul > li布局结合浮动（float: left）时，由于子元素脱离文档流，导致高度不一致，从而使导航按钮无法垂直居中。文章通过案例代码演示了问题，并深入分析了浮动布局导致高度不一致的根本原因。最终，文章推荐使用更现代化的Flexbox或Grid布局来轻松解决此类垂直居中难题，并避免浮动布局带来的诸多不便。 学习如何巧妙运用Flexbox或Grid布局，轻松实现导航按钮垂直居中！

CSS布局：巧妙解决导航按钮垂直居中难题

在使用ul > li布局时，子元素垂直居中常常成为棘手问题。本文将通过一个案例分析，讲解导航按钮垂直居中失效的原因，并提供有效的解决方案。

问题：导航按钮无法垂直居中

案例中，页面采用浮动布局，包含图片区、文字信息区和导航按钮区。然而，导航按钮并未垂直居中，而是位于右侧区域顶部。这是因为浮动布局导致元素高度不一致。代码如下：

      

        
      

        
贾三打边炉
        
主营：中餐 晚餐 宵夜
        
人均消费：120元
      
      

        导航
    
  

对应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可以轻松解决这个问题。

今天关于《CSS布局中导航按钮如何垂直居中？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！