【快应用】align-self属性设置不生效案例

​ 

问题背景：

华为ide中在text和image组件的style标签中使用align-self 属性，出现报错提示，'<text>' does not support 'align-self' style和'<image>' does not support 'align-self' style，该如何解决？

示例代码：

<template>

  <!-- Only one root node is allowed in template. -->

  <div class="container">

    <text class="title" style="align-self: center">Hello World</text>

    <image class="img" style="align-self: center"  src="/Common/logo.png"></image>

  </div>

</template>

​

 

解决方案：

这个是华为与联盟ide的一个差异导致的，实际华为是支持这个属性的，只是不能写在style标签中，需要写在class伪类里才是可以的。

相关代码：

<template>

  <!-- Only one root node is allowed in template. -->

  <div class="container">

    <text class="title">Hello World</text>

    <image class="img" src="/Common/logo.png"></image>

  </div>

</template>

 

<style>

  .container {

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

 

  .title {

    font-size: 100px;

    align-self: center;

  }

  .img {

    align-self: center;

  }

</style>

​欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh