image和text标签在view标签中居中

可以使用CSS中的display和text-align属性来实现居中对齐，具体方法如下：

1. 对于image标签，可以使用以下CSS代码：

img {
  display: block;
  margin: 0 auto;
}

其中，display: block;将图片转换为块级元素，使其可以设置margin属性。margin: 0 auto;将左右外边距设置为auto，实现水平居中对齐。

2. 对于text标签，可以使用以下CSS代码：

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

其中，display: flex;将div元素转换为flex容器，justify-content: center;将子元素水平居中对齐，align-items: center;将子元素垂直居中对齐。这样text标签就可以在div容器中居中对齐了。

相关问题

uniapp 自定义toast image 不居中

如果在uniapp中自定义toast时，设置了image属性，但是图片显示不居中，可以通过在样式中设置background-position属性来调整图片位置。

以下是一个示例代码：

<template>
  <view class="container">
    <button @tap="showToast">显示toast</button>
  </view>
</template>

<script>
export default {
  methods: {
    showToast() {
      uni.showToast({
        title: '自定义toast',
        icon: 'none',
        duration: 2000,
        image: '/static/custom-toast.png',
        mask: true,
        success: (res) => {
          console.log('toast显示成功', res)
        },
        fail: (err) => {
          console.log('toast显示失败', err)
        },
        complete: () => {
          console.log('toast显示完成')
        }
      })
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* 自定义toast样式 */
.custom-toast {
  background-image: url('/static/custom-toast.png');
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center 10px; /* 调整图片位置 */
  padding: 60px 40px 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  font-size: 16px;
  color: #fff;
  text-align: center;
}
</style>

在以上代码中，我们在样式中定义了一个.custom-toast类，其中设置了background-image、background-repeat、background-size和background-position属性，通过调整background-position属性的值，可以实现图片居中显示。

在uni.showToast()方法中，我们指定了一个自定义的类名，即className属性为'custom-toast'，这样就可以应用我们自己定义的样式。

需要注意的是，如果自定义的toast样式中设置了padding属性，需要根据实际情况调整background-position属性的值，以确保图片居中显示。

微信小程序，写一个悬浮view，包括圆形头像和名字，都在view上左右居中

可以通过使用组件`<view>`和`<image>`来实现。具体实现步骤如下：

1. 在`<view>`中添加`position: fixed`样式，使其可以悬浮在页面上。
2. 使用`<image>`添加圆形头像，并设置宽高、圆角和边框样式。
3. 在`<view>`中添加名字文本，并设置居中样式。

下面是示例代码：

<view class="float-view" style="position: fixed;">
  <image class="avatar" src="头像图片链接"></image>
  <text class="name">名字</text>
</view>

.float-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  background-color: #fff;
  box-shadow: 0 1px 10px #ccc;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.name {
  flex: 1;
  text-align: center;
}

通过以上代码，即可实现一个悬浮的view，包括圆形头像和名字，都在view上左右居中。