How can I horizontally center vertical rotated text?

Question

This is the issue I'm facing:

Issue

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.

**Please do note that the smiley has been rotated 90 degrees.** I've tried this (https://stackoverflow.com/questions/41045537/how-can-i-vertically-center-rotated-text-using-flexbox-layout), but to no avail. — KNY, Jan 17 '20 at 18:42

score 2 · Accepted Answer · answered Jan 24 '20 at 09:26

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>

score 0 · Answer 2 · answered Jan 24 '20 at 09:46

0

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

answered Jan 24 '20 at 09:46

divya_kanak

142
9

so this works by setting `margin`. typo: `text-aling` → `text-align` – milahu Aug 17 '22 at 08:16

score 0 · Answer 3 · answered Jan 24 '20 at 09:50

I think this is what you want

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

How can I horizontally center vertical rotated text?

3 Answers3