Как красиво отцентрировать вертикальный скользящий текст

Question

У меня возникают проблемы с поиском правильного центрирования вертикально скользящего текста на моей веб-странице.Вот пример фрагмента: http://turistickemagnetky.sk/slide/

В данный момент символ & прыгает вокруг, чтобы разместить скользящий текст перед ним.Чего я хотел бы добиться, так это заблокировать символ & в середине страницы, и скользящий текст должен обтекать и расширяться вокруг него по мере необходимости.Я почти уверен, что есть небольшие изменения в CSS, но я не могу понять это, поэтому любая помощь будет оценена.

Answer 1

Используйте display: flex; Удалите поля из .cd-intro и установите width: 100% (сначала отмените максимальную ширину).Как только .cd-intro будет установлен на 100% ширины и согнут, дайте ему height: 100vh; и align-items: center; justify-content: center;

, которые действительно сработали для меня.Я не знаю, если это то, что вы ищете.

.cd-intro {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 2

Добавить этот CSS:

section.cd-intro {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

section.cd-intro > :nth-child(1) {
    justify-self: end;
}

section.cd-intro > :nth-child(2) {
    margin: auto .25em;
}

section.cd-intro > :nth-child(3) {
    justify-self: start;
}