css - 如何水平居中垂直旋转的文本？

Question

这是我面临的问题:

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

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 度。

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