Вертикально центр, активный ли в ул

Question

Я хочу сделать что-то вроде musixmatch.Я хочу отобразить активный стих в центре ul.

Я знаю, как это сделать в JavaScript, но возможно ли этосделать это с чистым CSS?

<ul id="lyrics">
    <li>You know, everybody's been tellin' me what they think about me for the last few months</li>
    <li class="active">It's too loud</li>
    <li>Maybe it's time I tell 'em what I think about them</li>
</ul>

CSS:

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
    background: #252525;
    font-family: 'Roboto', sans-serif;
    color: white;
}   

#lyrics {
    background-color: rgba(0, 0, 0, 0.45);
    position: fixed;
    width: 70%;
    list-style: none;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    margin: 0 auto;
    text-align: center;
    font-weight: 500;
    font-size: 2em;
    height: 50vh;
    color: rgb(240, 240, 240);
    overflow: hidden;
}

#lyrics .active {
    color: cornsilk;
    font-weight: 600;
    font-size: 1.2em;
}

Answer 1

0 Пока вы пытаетесь изменить расположение текста в соответствии с песней, что связано с использованием времени, вам, безусловно, нужен Javascript;но если вы спрашиваете только об изменении расположения текста, то -

• оберните active div вокруг следующей строки
• измените значение тега topк отрицательному значению пикселя / проценту

Например, если вы хотите выделить следующую строку песни, это код:

body {
    background: #252525;
    font-family: 'Roboto', sans-serif;
    color: white;
}   

#box {
    background-color: rgba(0, 0, 0, 0.45);
    position: fixed;
    width: 70%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    margin: 0 auto;
    text-align: center;
    font-weight: 500;
    font-size: 2em;
    height: 50vh;
    color: rgb(240, 240, 240);
    overflow: hidden;
}
ul {
    position: relative;
    top: -15%;
    list-style: none;
}

#lyrics .active {
    color: cornsilk;
    font-weight: 600;
    font-size: 1.2em;
}

<div id = "box">
<ul id="lyrics">
    <li>You know, everybody's been tellin' me what they think about me for the last few months</li>
    <li>It's too loud</li>
    <li class="active">Maybe it's time I tell 'em what I think about them</li>
</ul>
</div>

В код внесены некоторые изменения.Я обернул ul вокруг div идентификатором box.Я перенес все свойства CSS идентификатора lyrics в box и в ul, я сделал его положение relative (относится не к главному экрану, а к блоку, внутри которого он находится) и имеюустановите отрицательное значение для атрибута top, чтобы переместить текст вверх, сделав видимой следующую строку.

Примечание : Я установил -120% на основе его предварительного просмотра.Если в случае, если вам нужен полный результат страницы, измените его на что-то вроде -20% или -15%.

Я надеюсь, что это то, о чем вы просили, и это поможет.

Answer 2

Что насчёт этого:

#lyrics {
background-color: rgba(0, 0, 0, 0.45);
position: fixed;
width: 70%;
list-style: none;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
margin: 0 auto;
text-align: center;
font-weight: 500;
font-size: 2em;
height: 50vh;
color: rgb(240, 240, 240);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

}