• 智能AI问答!更聪明、更完整、原创作!
  • 一款基于GPT的超级AI机器人,可以回答问题、聊天、创作、写文案!

uniapp 一个居中的图片,带一个白色背景层border-radius: 10px;,下面一行居中的文字,文字内容为关注公众号

发布于 2023-09-17 13:59:23

您可以使用以下代码实现一个居中的图片,并带有一个白色背景层和圆角边框:

<template>
  <view class="container">
    <view class="image-wrapper">
      <image src="/static/image.jpg" class="image"></image>
    </view>
    <view class="text-wrapper">
      <text class="text">关注公众号</text>
    </view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-wrapper {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10px;
  background-color: #ffffff;
}

.image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.text-wrapper {
  margin-top: 20rpx;
  text-align: center;
}

.text {
  font-size: 28rpx;
  color: #000000;
}
</style>

在上面的代码中,我们使用 flex 布局将容器设置为垂直方向居中对齐。通过设置 image-wrapper 的宽度、高度和圆角边框来创建背景层,并在其中放置图片。下方的文字则通过设置 margin-top 和 text-align 的方式实现居中对齐。您可以将 /static/image.jpg 替换为您自己的图片路径。

请注意,以上代码使用了 rpx 单位,用于适配不同设备的屏幕。您可以根据需求修改样式以及调整大小。

0 条评论

发布
问题

在线
客服