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

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

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

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

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

<code class="html"><view class="shoplist">
  <ul>
    <li>
      <div class="left">
        <van-image fit="contain" height="6rem" src="https://img.yzcdn.cn/vant/cat.jpeg" width="6rem"></van-image>
      </div>
      <div class="middle">
        <div class="title">贾三打边炉</div>
        <div class="content">主营：中餐 晚餐 宵夜</div>
        <div class="other">人均消费：120元</div>
      </div>
      <div class="right">
        <van-button size="small" type="primary">导航</van-button>
      </div>
    </li>
  </ul>
</view></code>

对应CSS样式：

立即学习“前端免费学习笔记（深入）”；

PixVerse

PixVerse是一款强大的AI视频生成工具，可以轻松地将多种输入转化为令人惊叹的视频。

下载

<code class="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;
}</code>

原因分析：浮动布局导致高度不一致

由于使用了float: left，子元素脱离文档流，高度相互独立。图片高度和文字内容高度不同，导致右侧区域高度由按钮决定，按钮自然无法垂直居中。

解决方案：拥抱Flexbox或Grid布局

建议放弃浮动布局，采用更现代化的Flexbox或Grid布局。它们能更有效地控制元素对齐，避免浮动布局的诸多问题。 浮动元素脱离文档流，导致高度不一致是其固有特性。 未设置高度，元素高度由内容撑开，导致高度不一致也是正常现象。 使用Flexbox或Grid可以轻松解决这个问题。