H1標籤邊框長度可能嗎？

Question

我爲自己製作了一幅全幅圖像，並添加了文字。 我一直在抓我的頭，現在有很多時間。 我試圖找到最佳的解決方案，以添加上下文邊界的文本。

但是，我想邊界的長度是一半或更少，但我根本無法弄清楚。

在標籤類之前，我嘗試在文本容器div上使用邊框，但我在對齊文本和獲得正確對齊方面遇到了問題。

下面是它的是現在：

CSS：

.adcontainer { 
    position: relative; 
    width: 100%; 
    height: auto; 
} 
.adcontainer img { 
    width: 100%; 
    height: auto; 
} 
.adcontainertext { 
    position: absolute; 
    top: 25%; 
    left: 15%; 
    z-index: 0; 
    padding: 0; 
    padding: 1.2em; 
    font-size: .5em; 
    text-align: center; 
} 


.advertheading 
{ 
    font-size: 20px; 
    border-bottom: 1px solid white; 
    border-top: 1px solid white; 
    line-height: 100px; 
    display:inline-block 

} 

HTML：

<div style="clear: both;"> 
<div class="adcontainer"><img src="https://cdn.shopify.com/s/files/1/0786/5107/files/LARGE_BANNER-BELOW.jpg?5938182738858039286" /> 
<div class="adcontainertext"> 
<h2 class="advertheading" style="font-weight: normal; color: #ffffff;">Join the club</h2> 
</div> 
</div> 
</div> 

最好的問候， 羅賓。

Answer 1

.adcontainer { 
 
    position: relative; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.adcontainer img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.adcontainertext { 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 15%; 
 
    z-index: 0; 
 
    padding: 0; 
 
    padding: 1.2em; 
 
    font-size: .5em; 
 
    text-align: center; 
 
} 
 

 
.adcontainertext h2:before { 
 
    content: ''; 
 
    border-top: 1px solid #FFF; 
 
    position: absolute; 
 
    width: 50%; 
 
    left: 25%; 
 
    top: 0; 
 
} 
 

 
.advertheading { 
 
    font-size: 20px; 
 
    line-height: 100px; 
 
    display:inline-block; 
 
    position: relative; 
 
} 
 

 
.adcontainertext h2:after { 
 
    content: ''; 
 
    border-bottom: 1px solid #FFF; 
 
    position: absolute; 
 
    width: 50%; 
 
    left: 25%; 
 
    bottom: 0; 
 
}

<div style="clear: both;"> 
 
    <div class="adcontainer"> 
 
    <img src="https://cdn.shopify.com/s/files/1/0786/5107/files/LARGE_BANNER-BELOW.jpg?5938182738858039286" /> 
 
    
 
    <div class="adcontainertext"> 
 
     <h2 class="advertheading" style="font-weight: normal; color: #ffffff;">Join the club</h2> 
 
    </div> 
 
    </div> 
 
</div>