How to nicely center vertical sliding text

Question

I am having trouble figuring out how to nicely center vertically sliding text on my webpage. Here is the example snipet: http://turistickemagnetky.sk/slide/

At the moment the & symbol jumps around to accommodate the sliding text before it. What I would like to achieve is to lock the & symbol d in the middle of the page and the sliding text should flow and expand around it as necessary. I am pretty sure there is just some minor css change, but I cant figure it out so any help will be appreciated.

See if this can help, i think it's duplicated https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css — Flavio Caruso, May 03 '19 at 12:02
And to help you better, can you show us some of the code you tried so far? — Flavio Caruso, May 03 '19 at 12:03

score 1 · Answer 1 · answered May 03 '19 at 12:08

1

Use display: flex; Remove margins from .cd-intro and set width: 100% (first, unset the max-width). Once .cd-intro is set to 100% width and flexed, give it a height: 100vh; and align-items: center; justify-content: center;

That actually worked for me. I don't know if that's what you're looking for.

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

answered May 03 '19 at 12:08

M4FI4S

160
7

Not the vertical alignment is the problem here – yunzen May 03 '19 at 12:14

score 0 · Answer 2 · answered May 03 '19 at 12:13

Add this 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;
}

How to nicely center vertical sliding text

2 Answers2