How can I rotate the text in a td and keep it center?

Question

I would like to do something like this but I'm not able to do it.

I know how to rotate the text with :

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

But I don't know how to keep it aligned in the center of the cell.

Could you help me?

score 3 · Answer 1 · edited May 23 '17 at 12:24

Taken from: https://stackoverflow.com/a/27258573/6376949

.rotate {
  display: inline-block;
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.tblborder,
.tblborder td,
.tblborder th {
  border-collapse: collapse;
  border: 1px solid #000;
}
.tblborder td,
.tblborder th {
  padding: 20px 10px;
}

<table class="tblborder">
  <tr>
    <th>
      <div class="rotate">header</div>
    </th>
    <th>
      <div class="rotate">header</div>
    </th>
    <th>
      <div class="rotate">header</div>
    </th>
  </tr>
  <tr>
    <td>
      <div class="rotate">detail</div>
    </td>
    <td>detail</td>
    <td>detail</td>
  </tr>
  <tr>
    <td>detail</td>
    <td>detail</td>
    <td>detail</td>
  </tr>
</table>

it works but I would like to size the cell with the size of the text. Do you know what I need to add? — Erylis, Dec 14 '16 at 17:46

score 1 · Answer 2 · answered Dec 14 '16 at 11:08

Try with this snippet , is this what you need text vertically and horizontaly center

.text_div {
 width:100px;
 height:200px;
 background:#999;
 float:left;
 text-align:center;
 display:table;
}
.text_div p {
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 transform: rotate(-90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 display:table-cell;
 vertical-align:middle;
}

<div class="text_div">
 <p> rotate text </p>
</div>

score 0 · Answer 3 · answered Dec 14 '16 at 11:16

try this... you need to adjust it as per your content.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <style>
  #rotatetext{
 
      background:#999;
      float:left;
      text-align:center;
      margin-top:10px;
      
  -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 transform: rotate(-90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 display:table-cell;
 vertical-align:middle;}
  
  </style>
</head>
<body>

<div class="container">
  <h2>Table</h2>
  <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>                                                                                      
  <div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id ="rotatetext">Usage </td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

</body>
</html>

How can I rotate the text in a td and keep it center?

3 Answers3