如何旋转 td 中的文本并使其居中？ [复制]答案

【问题标题】：How can I rotate the text in a td and keep it center? [duplicate]如何旋转 td 中的文本并使其居中？ [复制]
【发布时间】：2016-12-14 11:04:59
【问题描述】：

我想做类似的事情 this 但我做不到。

我知道如何旋转文本：

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

但我不知道如何让它在单元格的中心对齐。

你能帮帮我吗？

【问题讨论】：

标签： html css

【解决方案1】：

取自：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>

【讨论】：

它可以工作，但我想用文本大小调整单元格的大小。你知道我需要补充什么吗？

【解决方案2】：

试试这个 sn-p ，这是你需要的文本垂直和水平居中

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

【讨论】：

【解决方案3】：

试试这个...你需要根据你的内容调整它。

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

【讨论】：