CODEWITHSUNDEEP
css
KNY
KNY

Reputation: 35

How can I horizontally center vertical rotated text?

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.

Upvotes: 3

Views: 75

Answers (3)

Suman Dey
Suman Dey

Reputation: 57

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>

Upvotes: 0

divya_kanak
divya_kanak

Reputation: 142

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

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272590

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>

Upvotes: 2

Related Questions