Как я могу повернуть текст в td и сохранить его в центре?

Я хотел бы сделать что-то вроде this , но я не в состоянии это сделать.Как я могу повернуть текст в td и сохранить его в центре?

Я знаю, как повернуть текст с:

-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);

Но я не знаю, как сохранить выравнивание в центре ячейки.

Не могли бы вы мне помочь?

источник

2016-12-14 Erylis

Попробуйте с этим фрагментом, это то, что вам нужно текст вертикально и горизонтально центр

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

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

источник

2016-12-14 11:08:44

попробовать это ... вам нужно настроить его в соответствии с содержанием.

<!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); 
 
\t -moz-transform: rotate(-90deg); 
 
\t -ms-transform: rotate(-90deg); 
 
\t -o-transform: rotate(-90deg); 
 
\t transform: rotate(-90deg); 
 
\t filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
 
\t display:table-cell; 
 
\t 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>

источник

2016-12-14 11:16:20

Взято из: 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>

источник

2016-12-14 11:18:38

это работает, но я хотел бы, чтобы размер ячейки с размером текста. Знаете ли вы, что мне нужно добавить? – Erylis

Как я могу повернуть текст в td и сохранить его в центре?

ответ

Смежные вопросы