logo标签列表

如何在一个td中旋转文字并保持其居中？

htmlcss
5
我希望能够做出类似于这个的效果，但我无法做到。
我知道如何旋转文字，用以下代码实现：
-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);

但是我不知道如何将它保持在单元格中心对齐。你能帮我吗？
3个回答
3

摘自：https://dev59.com/ZHVC5IYBdhLWcg3whBWj#27258573

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

它可以运行，但我想根据文本的大小调整单元格尺寸。你知道我需要添加什么吗？ - Erylis
1
尝试使用这个代码片段，将文本垂直和水平居中，这是您需要的吗？ 

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

0

你可以尝试这个... 你需要根据自己的内容进行调整。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接