时间戳

首页 > 解决方案 > 如何将部分底线放在 h1 跨度文本的正中间？

html - 如何将部分底线放在 h1 跨度文本的正中间？

问题描述

您好，我在 h1 文本下有一条部分底部黄线，但我不知道如何将它放在中间。我可以把它放在左边，但对齐中心或边距自动不起作用。

我试着玩了大约一个小时，但我无法弄清楚。我看到有些人给 h1 跨度一个特定的像素宽度，但我试图避免这样做，因为我计划让 ipad 和移动设备的文本更小。

.l-heading {
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}


.container {
    max-width: 1404px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}


.text-center {
    text-align: center;
}



#meet-our-team .container h1 span {

    position: relative;
    
}

#meet-our-team .container h1 span::after {

    content: '';
    width: 40%;
    height: 4px;
    background: red;
    position: absolute;
    bottom: -4px;
    left: 0;
    
    
}
<section id="meet-our-team" class="bg-black">
    <div class="container">
        <h1 class="l-heading text-center py-2">
            <span>Meet The Owner</span>
        </h1>  
        
    </div>
</section>

标签： htmlcss

解决方案

margin: auto是正确的，但是您不能像这样将绝对伪元素居中，只能使用 auto。但是，如果您设置left: 0;和right: 0;，您将水平居中。

.l-heading {
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}


.container {
    max-width: 1404px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}


.text-center {
    text-align: center;
}



#meet-our-team .container h1 span {
    position: relative;   
}

#meet-our-team .container h1 span::after {
    content: '';
    width: 40%;
    height: 4px;
    background: red;
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    margin: auto;
}
<section id="meet-our-team" class="bg-black">
    <div class="container">
        <h1 class="l-heading text-center py-2">
            <span>Meet The Owner</span>
        </h1>  
        
    </div>
</section>

推荐阅读