问题背景:
华为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>