CODEWITHSUNDEEP
htmlcsstailwind-css
tony
tony

Reputation: 624

How to center text that is writing-modes vertically written?

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>

Upvotes: 2

Views: 1509

Answers (3)

tony
tony

Reputation: 624

The way to properly fix this was this:

.nav ul {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

Upvotes: 0

pullidea-dev
pullidea-dev

Reputation: 1803

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

Upvotes: 1

lanpierre
lanpierre

Reputation: 102

Add display:inline-block to .nav li and it works.

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

Unless you make .nav display:flex , remove the flex rules:

justify-content: center; align-items: center;

EDIT:

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

Upvotes: 1

Related Questions