uni-app:文字竖直排列,并且在父级view中水平竖直对齐

一、效果

二、代码

html 复制代码
<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>
相关推荐
JarvanMo2 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒21 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用23 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥39 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830948 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr