Question

我想做点什么 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);

但我不知道如何让它在细胞中心保持对齐。

你能帮帮我吗？

Answer 1

取自：https://stackoverflow.com/a/27258573/6376949

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试使用此代码段，这是您需要垂直文本和水平中心

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何旋转td中的文本并使其保持居中？

3 个答案: