如何水平居中垂直旋转文本？答案

【问题标题】：How can I horizontally center vertical rotated text?如何水平居中垂直旋转文本？
【发布时间】：2020-01-24 17:50:47
【问题描述】：

这是我面临的问题：

无论我尝试什么，它都不会水平对齐笑脸。

CodePen 供参考：https://codepen.io/d1401/pen/eYmPgZP

.no-results {
  text-align: center;
}

#smiley {
  font-size: 12em;
  writing-mode: vertical-lr;
  margin: 30px auto;
}

#text {
  font-size: 1.6em;
}

<div class="no-results">
  <p id="smiley">:(</p>
  <p id="text">No matches found</p>
</div>

请注意，笑脸已旋转 90 度。

【问题讨论】：

请注意，笑脸已经旋转了 90 度。我试过这个 (stackoverflow.com/questions/41045537/…)，但无济于事。
@TemaniAfif 工作完美！非常感谢！

标签： css

【解决方案1】：

您可以考虑使用伪元素进行vertical-align hack：

.no-results {
  text-align: center;
}

#smiley {
  font-size: 12em;
  writing-mode: vertical-lr;
  margin: 30px auto;
}

#text {
  font-size: 1.6em;
}
/* This will do the magic */
p#smiley:before {
  content: "";
  vertical-align: sub;
}

<div class="no-results">
  <p id="smiley">:(</p>
  <p id="text">No matches found</p>
</div>

【讨论】：

【解决方案2】：

.no-results {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
  background: red;
  text-aling: center
}

#smiley {
  font-size: 12em;
  writing-mode: vertical-lr;
  margin: 18%;
}

#text {
  font-size: 1.6em;
  margin: 18%;
}

<div class="no-results">
  <p id="smiley">:(</p>
  <p id="text">No matches found</p>
</div>

【讨论】：

【解决方案3】：

我想这就是你想要的

#text {
  font-size: 1.6em;
}

#smiley {
   width: 25px;
  font-size: 1.6em;
   transform: rotate(180deg);
}


<table>
    <tr>
        <td>
            <p id="smiley">:( </p>
        </td>
        <td>
            <p id="text">No matches found</p>
        </td>
    </tr>
   </table>

【讨论】：