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

我回应用户＆＃34; Sticker＆＃34; s建议...尝试将 vertical-align：middle CSS添加到.player-controls按钮，如下所示：这里是一个plunker {{ 3}}

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

Answer 2

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

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

中心对齐不一致

2 个答案: