Question

我在table table内添加了td。内部table td需要滚动时包含更多文本，因此我刚刚在其中添加了一个范围并应用CSS属性以限制height与overflow-y: auto

问题是：如何在表td的内部垂直对齐文本？

或需要为“子文本”

应用vertical-align: middle;

代码如下：

td {
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

.tbl-small {
  width: 100%;
}

.tbl-small td {
  height: 40px;
  overflow: auto;
}

.tbl-small td span {
  height: 40px;
  width: 100%;
  overflow-y: auto;
  display: block;
  vertical-align: middle;
  text-align: center;
}

<table width="400px;" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td width="25%">Main text</td>
      <td width="25%">
        <table class="tbl-small"  cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td width="25%">
        <table class="tbl-small"  cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td width="25%">Main text</td>
    </tr>
  </tbody>
</table>

JSFiddle： https://jsfiddle.net/vishnuprasadps/5684aupk/

Answer 1

添加max-height而不是height

.tbl-small td span {
  max-height: 40px;
  width: 100%;
  overflow-y: auto;
  display: block;
  vertical-align: middle;
  text-align: center;
}

td {
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

.tbl-small {
  width: 100%;
}

.tbl-small td {
  height: 40px;
  overflow: auto;
}

.tbl-small td span {
  max-height: 40px;
  width: 100%;
  overflow-y: auto;
  display: block;
  vertical-align: middle;
  text-align: center;
}

<table width="400px;" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td width="25%">Main text</td>
      <td width="25%">
        <table class="tbl-small"  cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td width="25%">
        <table class="tbl-small"  cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td width="25%">Main text</td>
    </tr>
  </tbody>
</table>

Answer 2

将此内容添加到span内的td中：

td span{
display:flex;
align-items:center;
justify-content:center // this only for horizontal align
}

Answer 3

您必须将line-height添加到td，并且还要在滚动的位置继承line-height:inherit。

td {
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

.tbl-small {
  width: 100%;
}

.tbl-small td {
  height: 40px;
  overflow: auto;
}

.tbl-small td span {
  max-height: 40px;
  width: 100%;
  overflow-y: auto;
  display: block;
  vertical-align: middle;
  text-align: center;
}

<table width="400px;" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td width="25%">Main text</td>
      <td width="25%">
        <table class="tbl-small"  cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><span class="scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td width="25%">
        <table class="tbl-small"  cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td width="25%">Main text</td>
    </tr>
  </tbody>
</table>

Answer 4

使用line-height属性使其垂直居中在您的代码中添加此CSS

.tbl-small td {
  height: 40px;
  overflow: auto;
  line-height:40px;
}

表TD溢出滚动与垂直对齐中间

4 个答案: