在 H1 内使用跨度时，H1 未水平居中（仅添加到右侧）

Question

我已经尽可能多地浏览了与此类似的帖子，但无济于事，我有一个以父“英雄”部分为中心的 H1，并希望在 H1 中包含一个跨度，因此所有文本居中（包括跨度）

添加跨度时，它似乎从居中 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>

代码 sn-p 也可以在这里找到：https://jsfiddle.net/347qmpnw/2/ 有什么想法吗？

Answer 1

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

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

更改类 fadeIn 和 .fadeIn span 以修复定位，如果您建议标记的宽度，它将准备就绪。但是如果你更喜欢“自动宽度”的解决方案，你可以使用一些小的 JS，比如下面的（quick&dirty）：

.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

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

我确实知道您这样做是为了让单词重叠并提供良好的淡入淡出效果，但这也是您问题的原因。

如果您知道单词的平均宽度并将其作为右边距添加到您的 H1 以强制将其推到“中心”，您可以“破解”它。在我在这里看到的文字中，您可以添加大约 70 像素，它应该看起来正确。

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