html - 居中对齐不一致

Question

我试图让持续时间和当前时间文本保持垂直居中。为什么有时它不会居中，而有时如果我进行刷新，即使我没有更改任何代码，它也会突然起作用？

这是它不起作用的屏幕截图:Not Working

这是硬刷新后的另一个，但没有更改任何代码:Working

这几乎就像是成功或失败。

<div class="player-controls">
    <div>
        <button id="playpause-button">
            <i class="fas fa-play fa-lg"></i>
        </button>
    </div>
    <div class="time-container">
        <span id="currenttime">00:00</span>
    </div>
    <div class="time-rail-container">
        <div id="time-rail"></div>
    </div>
    <div class="time-container">
        <span id="duration">00:00</span>
    </div>
    <div>
        <button id="rewind-button">
            <i class="fas fa-undo fa-lg"></i>
        </button>
    </div>
    <div>
        <button id="speed-button">
            <i class="fas fa-tachometer-alt fa-lg"></i>
        </button>
    </div>
    <div>
        <button id="captions-button">
            <i class="fas fa-closed-captioning fa-lg"></i>
        </button>
    </div>
    <div>
        <button id="volume-button"><i class="fas fa-volume-up fa-lg"></i></button>
    </div>
</div>

这是 CSS 表:

.player-controls {
    background: #2f2f2f;
    display: block;
    padding: 0;
    margin: 0 auto;
    text-align: left;
    width: 840px;
    height: 52px;
    user-select: none;
}

.player-controls button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    color: #fff;
}

.time-rail-container {
    width: 443px;
}

.player-controls > div {
    margin: 0 0 5px 0;
    display: inline-block;
}

#playpause-button,
#rewind-button,
#speed-button,
#captions-button,
#volume-button {
    padding: 0;
    margin: 0 1px 0 0;
    width: 56px;
    height: 50px;
}

.time-container {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

#duration,
#currenttime {
    vertical-align: middle;
}

Answer 1

这是因为它不确定要为垂直对齐引用什么，因为并非您尝试对齐的所有元素都彼此相邻。您需要在播放器控件内的所有元素上设置垂直对齐，而不是垂直对齐这两个元素。

.player-controls > * {
    vertical-align: middle;
}