相對於文本創建邊框？

這是一張圖片，顯示了我想要拉下的東西。相對於文本創建邊框？

enter image description here

於是，一行任何給定文本的左側和右側（通常是某種形式的標題標籤的），擴展對文本的每一側有一定的距離（在這種情況下， 65px）。

我需要一些與文本本身相關的流體......整體寬度無法修復。

來源

2012-10-29 Shpigford

看看這個問題：http://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like- line – SamHuckaby

@SamHuckaby據我所知，所有這些都是基於固定寬度的。我需要一個基於文本本身的流體解決方案。 – Shpigford

你打算使用jQuery或其他外部庫嗎？ – SamHuckaby

該解決方案是真實效果最好的一個我在過去，你可以選擇example here。代碼使用:: before和:: after僞類創建行，然後將display：table應用於文本，以便該框適應它的內容（我已經使用h2作爲示例）此類設計通常居中我已經添加了保證金：1em auto;
這樣做，你不需要添加任何額外的HTML。希望能幫助到你。

h2{ 
    display:table; 
    margin: 1em auto; 
} 
h2:before, h2:after{ 
    content:""; 
    display: block; 
    border-top: 1px solid #ccc; 
    width: 65px; 
    margin-top:.5em; 
} 
h2:before{ 
    float: left; 
    margin-right:3px; 
} 
h2:after{ 
    float:right; 
    margin-left:3px; 
}

來源

2012-10-30 18:21:11 rglepper

HTML代碼

<fieldset class="title"> 
    <legend>Some text</legend> 
</fieldset>

你的CSS代碼

fieldset.title { 
    border-top: 1px solid #aaa; 
    border-bottom: none; 
    border-left: none; 
    border-right: none; 
    display: block; 
    text-align: center; 

} 
    fieldset { 
     width: 50%;     
    } 
fieldset.title legend { 
    padding: 5px 10px; 

}

jsFiddle

來源

2012-10-29 19:48:28

示例內容似乎不是表單元素。因此這將是非語義標記。 –

正如在帖子中提到的，它不能是固定寬度。在帖子中還提到，這些很可能是標題標籤（即'h1'，'h2'等）。所以，這是行不通的。 – Shpigford

爲fieldset添加了一個css。這照顧非固定寬度 –

可以以不同的方式做到這一點。其中一種方法是在文本標題或文本內使用字體設置保留文本後，在文本週圍設置邊框。參考的建議在以下鏈接：

Add centered text to the middle of a <hr/>-like line

來源

2012-10-29 20:00:00 pibcat

據我所知，所有這些都是基於固定寬度。我需要一個基於文本本身的流體解決方案。 – Shpigford

另一種方式......創建寬度爲100％的div。裏面創建3個div並將中間的一個寬度設置爲Auto，並相應地設置左右div的寬度（不管固定寬度或可變寬度）..您將實現您要查找的內容 – pibcat

試試這個：Demo

<html> 
    <head> 
     <style type="text/css"> 
      .striked-text { 
       position: relative; 
      }    
      .striked-text .text {    
       z-index: 10; 
       position: relative; 
       background-color: white; 
       padding: 0 5px; 
      } 
      .striked-text .line {     
       left: -65px; 
       padding: 0 65px; 
       border-top: 1px solid gray; 
       top: 0.7em; 
       display: block; 
       position: absolute; 
       width: 100%; 
       z-index: 1; 
      } 
     </style> 
    </head> 
    <body> 
     <div style="text-align:center;"> 
      <span class="striked-text"><span class="text">FAQ</span><span class="line"></span></span> 
     </div> 
    </body> 
</html>

爲標題，你需要定義容器的寬度

來源

2012-10-29 20:03:12 Skpd

相對於文本創建邊框？

回答

相關問題