How can I horizontally center vertical rotated text?

Question

This is the issue I'm facing:

No matter what I try it won't align the smiley horizontally.

CodePen for reference: 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>

Please do note that the smiley has been rotated 90 degrees.

Answer 1

You may consider a vertical-align hack using pseudo element:

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