ToB企服应用市场:ToB评测及商务社交产业平台

标题: uni-app：笔墨竖直排列，并且在父级view中水平竖直对齐 [打印本页]

---

作者: 杀鸡焉用牛刀    时间: 2024-7-22 18:49
标题: uni-app：笔墨竖直排列，并且在父级view中水平竖直对齐
一、效果

二、代码

1. <template>
2.         <view class="parent">
3.           <text class="child">这是竖直排列的文字</text>
4.         </view>
5. </template>
6. <script>
7.         export default {
8.                 data() {
9.                         return {
11.                         }
12.                 },
13.                 methods: {
15.                 },
16.         };
17. </script>
18. <style>
19.         .parent {
20.           display: flex;
21.           align-items: center; /* 竖直居中 */
22.           justify-content: center; /* 水平居中 */
23.           height: 500px; /* 父级高度设为100%，或指定一个固定高度 */
24.           border:1px solid black;
25.         }
26.         .child {
27.           writing-mode: vertical-rl; /* 文字竖直排列，从右向左 */
28.           text-orientation: upright; /* 文字保持正常方向 */
29.           border:1px solid red;
30.         }
31. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4