我想让我的有打字效果的文字在这个div的中间居中,但是我不能让它工作。下面你可以看到我的代码,我试着用了一下,但它能适合工作。它仍然会在div的左边显示文字。
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-10 css-typing mx-auto ">
<p>
Hey! Ik ben
</p>
<p>
Tom Faas
</p>
</div>
</div>
</div>
</header>
CSS代码。
.css-typing p {
border-right: .15em solid white;
font-family: "Courier";
font-size: 14px;
white-space: nowrap;
overflow: hidden;
}
.css-typing p:nth-child(1) {
width: 7.3em;
text-align: center;
-webkit-animation: type 2s steps(40, end);
animation: type 2s steps(40, end),
blinkTextCursor 500ms steps(44) infinite normal;;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
width: 7.3em;
font-size: 200%;
text-align: center;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end),
blinkTextCursor 500ms steps(44) infinite normal;;
-webkit-animation-delay: 2s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
@keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
如你所见,在这个例子中,我试着使用了以下的CSS代码 mx-auto
tagg,但它不会将文本居中,仍然会将其放在div的左边。
添加下面的CSS属性,你使用 mx-auto
. 它将使你的文字居中。
display: flex;
flex-direction: column;
align-items: center;