杀鸡焉用牛刀 发表于 2024-7-22 18:49:27

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]
查看完整版本: uni-app:笔墨竖直排列,并且在父级view中水平竖直对齐