如何将书写模式垂直书写的文本居中? [英] How to center text that is writing-modes vertically written?

问题描述

如何将使用书写模式垂直书写的文本居中?正如您从我的示例中看到的那样，测试 0 运行良好，但测试 1 没有.为什么这没有响应?

.nav {对齐内容:居中；对齐项目:居中；文本对齐:居中；背景颜色:浅蓝色；}.nav p {背景色:浅珊瑚色；}.nav li {文本转换:大写；书写模式:垂直rl；文本方向:混合；变换:比例(-1)；背景色:珊瑚色；}

<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>示例</p><span>测试0</span><ul><li><a href=#">测试1</a></nav>

解决方案

您可以将 display: inline-block 应用到 .nav li.

How can I center text that is vertically written using writing-modes? As you can see from my example Test 0 works perfectly but Test 1 does not. Why is this not responsive?

.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>

解决方案

You can apply display: inline-block to .nav li.

这篇关于如何将书写模式垂直书写的文本居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！