uni-app:笔墨竖直排列,并且在父级view中水平竖直对齐
一、效果https://i-blog.csdnimg.cn/direct/5405397b9dfa4d2a91e095f4ed601127.png
二、代码
<template>
<view class="parent">
<text class="child">这是竖直排列的文字</text>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
},
};
</script>
<style>
.parent {
display: flex;
align-items: center; /* 竖直居中 */
justify-content: center; /* 水平居中 */
height: 500px; /* 父级高度设为100%,或指定一个固定高度 */
border:1px solid black;
}
.child {
writing-mode: vertical-rl; /* 文字竖直排列,从右向左 */
text-orientation: upright; /* 文字保持正常方向 */
border:1px solid red;
}
</style>
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页:
[1]