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

を縦にテキストやhorizontalyセンターに必要なものです。撮影

<!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内のテキストを回転して中央に維持するにはどうすればよいですか？

答えて

関連する問題