当span在h1内使用时，h1不水平居中(只是添加到右侧)

Question

我已经看过了尽可能多的类似的帖子，但无济于事，我有一个以父"部分，并希望在H1中包含一个span，以便所有文本都居中(包括span)

当span被添加时，它似乎从中间H1的右侧开始，而不是包含在整个H1的居中，这意味着它在较小的屏幕尺寸上被推出页面，并且不能很好地响应。

.hero {
text-align: center;
}
.fadeIn{
display: inline;
text-indent: 5px;
}
.fadeIn span{
animation: fadeEffect 12.5s linear infinite 0s;
-ms-animation: fadeEffect 12.5s linear infinite 0s;
-webkit-animation: fadeEffect 12.5s linear infinite 0s;
color: #7387a5;
opacity: 0;
/*overflow: hidden;*/
position: absolute;
}
.fadeIn span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}

<section class="hero" id="hero">
<div class="container">
<div class="header-and-subheader">
<!-- <h1>Measure your mental health</h1> -->
<h1>You measure your
<div class="fadeIn">
<span>fitness</span>
<span>sleep</span>
<span>weight</span>
<span>steps</span>
<span>calories</span>
</div>
</h1>
<h1 id="header-response"><em>...why not your mind?</em></h1>
</div>
</div>
</section>

代码片段也可以在这里找到:https://jsfiddle.net/347qmpnw/2/有什么想法吗?

Answer 1

仅通过css动画来实现非常好。我非常喜欢。

原因是包装器.fadeIn不是块元素，没有宽度，没有正确的定位。一个可能的解决方案是:

改变类别fadeIn和.fadeIn span来固定定位，如果你建议标记宽度，它将准备好。但是如果你更喜欢"自动宽度"的解决方案，你可以使用一些像(quick&dirty)这样的小JS:

.fadeIn{
display: inline-block;
position: relative;
vertical-align: top;
text-indent: 5px;
/* optional set a fix width here */
}
.fadeIn span{
animation: fadeEffect 12.5s linear infinite 0s;
-ms-animation: fadeEffect 12.5s linear infinite 0s;
-webkit-animation: fadeEffect 12.5s linear infinite 0s;
color: #7387a5;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}

$spans = document.querySelectorAll('.fadeIn span');
let maxWidth = 0;
for(let i=0; i< $spans.length; i++){
let actualWidth = $spans[i].offsetWidth;
if ( actualWidth > maxWidth ) maxWidth = actualWidth;                                   
}
maxWidth = (maxWidth + 5) + 'px'; // not forget: text-indend
document.getElementsByClassName('fadeIn')[0].style.width = maxWidth;

Answer 2

您添加的span为绝对位置。这意味着它不会占用任何实际空间。

我知道你这样做是为了让单词重叠，并给出一个漂亮的淡出效果，但这也是你的问题的原因。

你可以"破解"如果你知道单词的平均宽度，你就可以绕过它，把它作为你的H1的右边距，把它强行推到"居中"。在我看到的文字中，你可以添加大约70px，看起来应该是正确的。

但是我的猜测是你想要整个标题按照出现的单词移动。我想不出一种简单的HTML/CSS方式来做到这一点，恐怕你需要一些JS来正确地做到这一点