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

这是我面临的问题：

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

代码笔供参考：

。没有结果{
文本对齐：居中；
}
#笑脸{
字号：12em；
书写方式：垂直lr；
保证金：30像素自动；
}
#正文{
字号：1.6em；
}

：(
未找到匹配项
<代码> > p>可以考虑使用伪元素：
垂直对齐< /代码> HACK：


。没有结果{
文本对齐：居中；
}
#笑脸{
字号：12em；
书写方式：垂直lr；
保证金：30像素自动；
}
#正文{
字号：1.6em；
}
/*这会很神奇*/
斯迈利：以前{
内容：“；
垂直对齐：次对齐；
}

：(
未找到匹配项

。没有结果{
宽度：300px；
高度：300px；
位置：绝对位置；
左：50%；
最高：50%；
左边距：-150px；
利润上限：-150px；
背景：红色；
文本：中间
}
#笑脸{
字号：12em；
书写方式：垂直lr；
利润率：18%；
}
#正文{
字号：1.6em；
利润率：18%；
}

：(
未找到匹配项
我想这就是你想要的

#text {
  font-size: 1.6em;
}

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


：（
未找到匹配项
请注意，笑脸已经旋转了90度。我尝试过这个（），但没有效果。@TemaniAfif工作完美！非常感谢！

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