如何在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

嘗試在這個片段中，這是你所需要的垂直文本和horizontaly中心

.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中旋轉文本並保持中心？

回答

相關問題