CSS vertical-align，如何去除文字下方的小间距？

Question

我有 this 代码。尽管在 td 中，并且指定了这个 CSS:

.day {
    text-align: right;
    padding: 5px;
    vertical-align: middle;
    border: 1px solid black;
}

.day--hole {
    color: lightgray;
}

.day--today {
    background: pink;
}

<table>
  <tbody>
    <tr>
      <td class="day day--hole">30</td>
      <td class="day day--hole">31</td>
      <td class="day">1</td>
      <td class="day">2</td>
      <td class="day">3</td>
      <td class="day">4</td>
      <td class="day">5</td>
    </tr>
    <tr>
      <td class="day">6</td>
      <td class="day">7</td>
      <td class="day">8</td>
      <td class="day">9</td>
      <td class="day">10</td>
      <td class="day">11</td>
      <td class="day">12</td>
    </tr>
    <tr>
      <td class="day">13</td>
      <td class="day">14</td>
      <td class="day">15</td>
      <td class="day">16</td>
      <td class="day">17</td>
      <td class="day">18</td>
      <td class="day">19</td>
    </tr>
    <tr>
      <td class="day">20</td>
      <td class="day day--today">21</td>
      <td class="day">22</td>
      <td class="day">23</td>
      <td class="day">24</td>
      <td class="day">25</td>
      <td class="day">26</td>
    </tr>
    <tr>
      <td class="day">27</td>
      <td class="day">28</td>
      <td class="day">29</td>
      <td class="day">30</td>
      <td class="day">31</td>
      <td class="day day--hole">1</td>
      <td class="day day--hole">2</td>
    </tr>
  </tbody>
</table>

文本应居中的位置与文本的当前位置之间存在可见间隙。它看起来比应有的 "upper" 并且没有完全居中。为什么会发生这种情况，我该如何解决它而无需重复更改 HTML 或使用 flexbox？

Answer 1

例如，我将高度设置得比需要的高。但是试试下面的例子。 height 和 line-height 应该等于文本居中。

let height = document.getElementById('height');
let days = Array.from( document.querySelectorAll('.day') );

height.addEventListener('input', () => {
  days.forEach( day => {
    day.style.setProperty( '--height', `${height.value}px` );
  });
});

.day {
    text-align: right;
    padding: 5px;
    height: var(--height);
    line-height: var(--height);
    border: 1px solid black;
}

.day--hole {
    color: lightgray;
}

.day--today {
    background: pink;
}

:root {
  --height: 40px;
}

<form>
  <label for="height">Height (play with it to say that the text remains centered)</label>
  <input type="number" id="height" min="1" value="40">
</form>

<table>
  <tbody>
    <tr>
      <td class="day day--hole">30</td>
      <td class="day day--hole">31</td>
      <td class="day">1</td>
      <td class="day">2</td>
      <td class="day">3</td>
      <td class="day">4</td>
      <td class="day">5</td>
    </tr>
    <tr>
      <td class="day">6</td>
      <td class="day">7</td>
      <td class="day">8</td>
      <td class="day">9</td>
      <td class="day">10</td>
      <td class="day">11</td>
      <td class="day">12</td>
    </tr>
    <tr>
      <td class="day">13</td>
      <td class="day">14</td>
      <td class="day">15</td>
      <td class="day">16</td>
      <td class="day">17</td>
      <td class="day">18</td>
      <td class="day">19</td>
    </tr>
    <tr>
      <td class="day">20</td>
      <td class="day day--today">21</td>
      <td class="day">22</td>
      <td class="day">23</td>
      <td class="day">24</td>
      <td class="day">25</td>
      <td class="day">26</td>
    </tr>
    <tr>
      <td class="day">27</td>
      <td class="day">28</td>
      <td class="day">29</td>
      <td class="day">30</td>
      <td class="day">31</td>
      <td class="day day--hole">1</td>
      <td class="day day--hole">2</td>
    </tr>
  </tbody>
</table>

Answer 2

那是因为这些数字在技术上是 text，而文本 - 当使用字母时 - 有 g、j、p 等字母，它们延伸 below 基线。那是line-height的一部分，垂直居中就是居中那个行高，不管文本中有没有g、j、p之类的字母。因此，正如您所描述的那样，它看起来有点垂直偏移。

为了弥补这一点，您可以应用垂直偏移，就像我在此代码段的第一行和最后一行中所做的那样，对数字使用包装器并应用 position: relative 和 transform: translateY(1px);（或者你喜欢的任何值）：

.day {
    text-align: right;
    padding: 5px;
    vertical-align: middle;
    border: 1px solid black;
}

.day--hole {
    color: lightgray;
}

.day--today {
    background: pink;
}
.offset {
position: relative;
transform: translateY(1px);
}

<table>
  <tbody>
    <tr>
      <td class="day day--hole"><div class="offset">30</div></td>
      <td class="day day--hole"><div class="offset">31</div></td>
      <td class="day"><div class="offset">1</div></td>
      <td class="day"><div class="offset">2</div></td>
      <td class="day"><div class="offset">3</div></td>
      <td class="day"><div class="offset">4</div></td>
      <td class="day"><div class="offset">5</div></td>
    </tr>
    <tr>
      <td class="day">6</td>
      <td class="day">7</td>
      <td class="day">8</td>
      <td class="day">9</td>
      <td class="day">10</td>
      <td class="day">11</td>
      <td class="day">12</td>
    </tr>
    <tr>
      <td class="day">13</td>
      <td class="day">14</td>
      <td class="day">15</td>
      <td class="day">16</td>
      <td class="day">17</td>
      <td class="day">18</td>
      <td class="day">19</td>
    </tr>
    <tr>
      <td class="day">20</td>
      <td class="day day--today">21</td>
      <td class="day">22</td>
      <td class="day">23</td>
      <td class="day">24</td>
      <td class="day">25</td>
      <td class="day">26</td>
    </tr>
    <tr>
      <td class="day"><div class="offset">27</div></td>
      <td class="day"><div class="offset">28</div></td>
      <td class="day"><div class="offset">29</div></td>
      <td class="day"><div class="offset">30</div></td>
      <td class="day"><div class="offset">31</div></td>
      <td class="day day--hole"><div class="offset">1</div></td>
      <td class="day day--hole"><div class="offset">2</div></td>
    </tr>
  </tbody>
</table>

Answer 3

.day 上面有 text-align: right;。将其设置为 text-align: center;

CSS vertical-align，如何去除文字下方的小间距？

CSS vertical-align, how can I remove the little spacing below the text?

css

vertical-alignment