当跨度在 H1 内使用时，H1 不水平居中（只是添加到右侧）

Question

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

添加 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

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

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

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

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

Answer 2

仅通过 css 动画就可以做到这一点非常好。非常喜欢

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

更改类 fadeIn 和.fadeIn span 以修复定位，如果您建议标记的宽度，它将准备就绪。但是，如果您更喜欢 'automatic width' 解决方案，您可以使用下面的一些小 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;

当跨度在 H1 内使用时，H1 不水平居中（只是添加到右侧）

H1 not centring horizontally when span used within the H1 (just adding to right hand side)

html

css

centering