将动画元素内联块居中

Question

我想将 H1 的第二个跨度垂直居中。

我已经尝试将

display: inline-block

修改为

display: flex

，但这使我在容器的开头而不是中心开始动画。

我认为问题与分配给跨度父级的多个不同显示有关？

HTML

<section class="container">
            <div id="description">
                <h1>
                    <span>
                        This element is good,</span>
                    <span>
                        But this one is not centered.
                    </span>
                </h1>
            </div>
            <div id="other-div">
            </div>
</section>

CSS

.container {
    margin: auto 30px;
    background-color: black;
    border-radius: 1rem;
    display: flex;
}

#description {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: white;
}

#description h1 span:first-child {
    display: flex;
    justify-content: center;
    font-family: "Croissant One";
    font-size: 3.2rem;
    color: white;
}

#description h1 span:nth-child(2) {
    font-family: "Croissant One";
    font-size: 3.2rem;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    color: black;
    background-color: rgb(255, 237, 36);
    padding: 0px 15px;
    border-right: 0.15em solid white;
    white-space: nowrap;
    animation: typing 2.5s steps(30),
    blink-caret 0.9s step-end infinite;
}

@keyframes typing {
from {
    width: 0
}

to {
    width: 52%
}
}

@keyframes blink-caret {
50% {
    border-color: transparent;
}
}

#other-div {
    flex: 1;
    display: flex;
    justify-content: center;
}

你能帮我吗？

非常感谢！

Answer 1

为了完美集中，你是第二个跨度 并从中心开始动画而不是开始 您需要更改样式并使用弹性项目样式设置第二个跨度的样式：

align-self: center;

并将 flex 属性添加到 h1 以集中您的跨度。和 width 属性来正确执行动画：

#description h1{
display: flex;
width: 100%;
flex-direction: column; 
}

我编辑你的风格并发表评论：

    .container {
    margin: auto 30px;
    background-color: black;
    border-radius: 1rem;
}

#description {
    flex: 1;
    display: flex;
    justify-content: center;
    color: white;
}

/* You need set style for H1 element to get width 100% and execute youre animation correctuly, change width value for test it! :) */
#description h1{
    display: flex;
    width: 100%;
    flex-direction: column;
}

#description h1 span:first-child{
    display: flex;
    justify-content: center;
    font-family: "Croissant One";
    font-size: 3.2rem;
    color: white;
    /* with this property you can align your first span horizantally */
    justify-content: flex-start;
}

#description h1 span:nth-child(2){
    font-family: "Croissant One";
    font-size: 3.2rem;
    /* You don't need this properties */
    /* display: inline-block;
    vertical-align: middle; */
    overflow: hidden;
    color: black;
    background-color: rgb(255, 237, 36);
    padding: 0px 15px;
    border-right: 0.15em solid white;
    white-space: nowrap;
    animation: typing 2.5s steps(30),
    blink-caret 0.9s step-end infinite;
    /* with this property start you're animatin from center */
    align-self: center;
}

@keyframes typing {
from {
    width: 0
}

to {
    width: 52%
}
}

@keyframes blink-caret {
50% {
    border-color: transparent;
}
}

#other-div {
    flex: 1;
    display: flex;
    justify-content: center;
}