在书写模式下设置垂直居中

问题描述

我有一个带一些文本和写作模式的div：vertical-rl 。现在，我希望此文本位于中间，但 vertical-align：middle; 即使设置 line-height 。

I have a div with some text and writing-mode: vertical-rl. Now I want to this text be in the middle but vertical-align: middle; don't work even with setting line-height.

.a{
      background-color: coral;
      writing-mode: vertical-lr;
      min-height: 10em;
      vertical-align: middle;
      line-height: 2em;
  }

<div class="a">hiiiii<div>

我该怎么做？

推荐答案

使用 css3 flexbox 概念，将以下代码添加到样式表中，效果很好

use css3 flexbox concept,add the following codes to your style sheet ,it works fine

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

我在下面添加了代码段。

I'm added the snippet below.

.a{
      display:flex;
      justify-content:center;
      align-items:center;
      background-color: coral;
      writing-mode: vertical-lr;
      min-height: 10em;
      line-height: 2em;
  }

<div class="a">hiiiii<div>

这篇关于在书写模式下设置垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！