CSS垂直对齐，如何删除文本下方的小间距？

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>

应该将文本居中的位置与文本的当前位置之间存在可见的间隙。它看起来比应有的“上方”，而不是完全居中。为什么会发生这种情况，如何解决而又无需重复更改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等这样的字母，它们在基线以下扩展到。这是gtag('set', {'expId': 'xxxxxxxxxxxxxxxxxxxxxx'}); gtag('set', {'expVar':'1'}); 的一部分，并且垂直居中居中以该行高为中心，而不管文本中是否包含g，j，p之类的字母。因此，正如您所描述的，它看起来有些垂直偏移。

为弥补这一点，您可以应用垂直偏移，就像我在此代码段的第一行和最后一行中所做的那样，使用数字包装器并应用line-height和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);
}

Answer 3

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