时间戳

首页 > 解决方案 > 将旋转文本居中

html - 将旋转文本居中

问题描述

如何在此处垂直居中“有信息文本”？
更好 - 无需更改 html。

另外为什么不将第一个（高）max-width: 15px!important的宽度限制为？如何在不改变一般宽度参数的情况下限制它？<td>15px

td {width: 60px}
<table border="1">
    <tbody>
        <tr>
            <td style="max-width: 15px!important;" rowspan="12">
                <p style="transform: rotate(270deg); white-space: nowrap">There is information text</p>
            </td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
        </tr>
        <tr>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td>
        </tr>
        <tr>
            <td>10</td>
        </tr>
        <tr>
            <td>11</td>
        </tr>
        <tr>
            <td>12</td>
        </tr>
    </tbody>
</table>

需要将其居中而不旋转以使其工作：有可能吗？这对我来说是最有趣的。
在此处输入图像描述

标签： htmlcss

解决方案

不要使用旋转，而是调整writing-mode. 文本将居中，您不再需要强制宽度：

td:not([rowspan]) {
  width: 60px
}

p {
  margin:5px;
  writing-mode: vertical-lr;
  transform: scale(-1);
}
<table border="1">
  <tbody>
    <tr>
      <td rowspan="12">
        <p>There is information text</p>
      </td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
    </tr>
    <tr>
      <td>10</td>
    </tr>
    <tr>
      <td>11</td>
    </tr>
    <tr>
      <td>12</td>
    </tr>
  </tbody>
</table>

或者像下面这样：

td:not([rowspan]) {
  width: 60px
}

p {
  margin:5px;
  white-space:nowrap;
  max-width:15px;
  display:flex;
  justify-content:center;
  transform:rotate(-90deg);
}
<table border="1">
  <tbody>
    <tr>
      <td rowspan="12">
        <p>There is information text</p>
      </td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
    </tr>
    <tr>
      <td>10</td>
    </tr>
    <tr>
      <td>11</td>
    </tr>
    <tr>
      <td>12</td>
    </tr>
  </tbody>
</table>

推荐阅读