uniapp图片居中显示
时间: 2024-05-21 22:09:14 浏览: 118
uni-app自定义组件之菜单左右滑动并点击切换选中居中显示.zip
Uniapp中可以使用flex布局实现图片居中显示。具体方法如下:
1. 在image标签的父级元素上添加`display:flex`,使其成为一个flex容器。
2. 使用`justify-content:center`和`align-items:center`属性来实现图片水平和垂直居中。
示例代码如下:
```
<template>
<view class="container">
<image class="center-img" src="图片链接"></image>
</view>
</template>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.center-img {
width: 300rpx;
height: 300rpx;
}
</style>
```
阅读全文