如何将垂直书写的书写模式的文本居中？
Posted
技术标签:
【中文标题】如何将垂直书写的书写模式的文本居中？【英文标题】：How to center text that is writing-modes vertically written? 【发布时间】：2021-08-18 09:38:40 【问题描述】：如何使使用书写模式垂直书写的文本居中？正如您从我的示例中看到的那样，测试 0 可以完美运行，但测试 1 却不行。为什么没有响应？
.nav
justify-content: center;
align-items: center;
text-align: center;
background-color: lightblue;
.nav p
background-color: lightcoral;
.nav li
text-transform: uppercase;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: scale(-1);
background-color: coral;
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="fixed top-0 bottom-0 left-0 w-16 border-r border-gray-100 z-10 mobile-nav">
<div class="fixed bottom-16 left-0 w-16 select-none">
<nav class="nav block w-full">
<p>Example</p>
<span>Test 0</span>
<ul>
<li>
<a href="#">Test 1</a>
</li>
</ul>
</nav>
</div>
</div>
【问题讨论】：
【参考方案1】：将 display:inline-block 添加到 .nav li 即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>by Lancelot Pierre Blaine</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<style>
.nav
text-align: center;
background-color: lightblue;
.nav p
background-color: lightcoral;
.nav li
display: inline-block;
text-transform: uppercase;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: scale(-1);
background-color: coral;
</style>
</head>
<body>
<div class="fixed top-0 bottom-0 left-0 w-16 border-r border-gray-100 z-10 mobile-nav">
<div class="fixed bottom-16 left-0 w-16 select-none">
<nav class="nav block w-full">
<p>Example</p>
<span>Test 0</span>
<ul>
<li>
<a href="#">Test 1</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>除非您制作 .nav display:flex ，否则请删除 flex 规则：
对齐内容：居中； 对齐项目：居中；
编辑：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>by Lancelot Pierre Blaine</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<style>
.nav
text-align: center;
background-color: lightblue;
.nav p
background-color: lightcoral;
.nav li
display: inline-block;
text-transform: uppercase;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: scale(-1);
background-color: coral;
</style>
</head>
<body>
<div class="fixed top-0 bottom-0 left-0 w-full border-r border-gray-100 z-10 mobile-nav">
<div id="" class="fixed bottom-16 w-full left-0 select-none">
<nav class="nav block w-full">
<p>Example</p>
<span>Test 0</span>
<ul>
<li>
<a href="#">Test 1</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>【讨论】：
谢谢！完美运行，唯一的问题是现在列表包含两列，我该如何解决？【参考方案2】：您可以将display: inline-block 申请到.nav li。
【讨论】：
完美运行，唯一的问题是现在列表包含两列，我该如何解决？【参考方案3】：正确解决此问题的方法是：
.nav ul
display: flex;
flex-direction: column-reverse;
align-items: center;
【讨论】：
以上是关于如何将垂直书写的书写模式的文本居中？的主要内容，如果未能解决你的问题，请参考以下文章