如何与'write-mode:sideways-lr'结合使用水平和垂直居中文本?

问题描述

我有一个TD/DIV，里面有一些文字.我这样做是为了使文本显示在TD/DIV的中心.但是我希望使用 writing-mode:sideways-lr 将文本放在中间.我该怎么办?

  div {宽度:200像素；高度:100px；文本对齐:居中；垂直对齐:中间；边框:实心；显示:表格单元格；}.边 {写作模式:sideways-lr；}  

 < div>我的文字</div>< br>< div class ="side">我的文字</div>  

解决方案

考虑一个额外的跨度，在其中应用属性并更好地使用 writing-mode:vertical-rl; transform:scale(-1); 以获得更好的支持(您的代码实际上仅在Firefox上有效)

  div {宽度:200像素；高度:100px；文本对齐:居中；垂直对齐:中间；边框:实心；显示:表格单元格；}.side span {/*写入模式:sideways-lr;*/写作模式:vertical-rl;转换:scale(-1);}  

 < div>我的文字</div>< br>< div class ="side">< span>我的文字</span></div>  

I have a TD/DIV with some text inside. I made so that the text is displayed in the center of TD/DIV . But I want the text to be in center using writing-mode: sideways-lr. How can I do this?

div {
  width: 200px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: solid;
  display: table-cell;
}

.side {
  writing-mode: sideways-lr;
}

<div>My text</div>
<br>
<div class="side">My text</div>

Code here

解决方案

Consider an extra span where you apply the property and better use writing-mode: vertical-rl;transform: scale(-1); to have better support (your code works only on Firefox actually)

div {
  width: 200px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: solid;
  display: table-cell;
}

.side span {
  /* writing-mode: sideways-lr; */
  writing-mode: vertical-rl;
  transform: scale(-1);
}

<div>My text</div>
<br>
<div class="side"><span>My text</span></div>

这篇关于如何与'write-mode:sideways-lr'结合使用水平和垂直居中文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！