图片文字对齐图片文字居中对齐

星空小梦

于 2023-07-14 11:13:41 发布

阅读量697

点赞数

分类专栏： css 文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/weixin_50885665/article/details/131719279

版权

本文介绍了两种实现图片与文字居中对齐的方法：一是使用CSS的vertical-align: middle属性；二是利用弹性盒子（Flexbox）布局进行对齐。详细讲述了这两种方法的适用场景和操作步骤。

摘要由CSDN通过智能技术生成

方法一: 用 vertical-align: middle;

<view class="container">

  <view class="search">
    <image src="../../images/icon/search.png" alt="" />
    <text class="tex">搜索</text>
  </view>

</view>

.search {
  height: 50rpx;
  border: 1px solid red;
  text-align: center;
  background-color: rgb(245, 245, 248);
  border-radius: 10rpx;
}

.search image {
  width: 30rpx;
  height: 30rpx;
  vertical-align: middle;
}

.search .tex {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

方法二: 弹性