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

wufei123 2025-03-01 阅读:47 评论:0

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

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

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

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

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

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

PHP

<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>

对应CSS样式：

PHP

.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;
}