CSS技巧：建立水平線和居中文字

Question

我正在嘗試製作一個帶有一些文字的水平分隔線。 例如：

----------------------------------- 這裡是我的標題------ -----------------------

有沒有辦法在CSS中實現這個效果？顯然不需要使用所有的"-"破折號。

Answer 1

嘗試了不同的解決方案後，我找到了一個適用於不同文字寬度、任何可能的背景且不添加額外標記的有效解決方案。

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}

<h1>标题</h1>
<h1>这是一个较长的标题</h1>

我在IE8、IE9、Firefox和Chrome中進行了測試。您可以在這裡檢查它：http://jsfiddle.net/Puigcerber/vLwDf/1/

Answer 2

這大致上是我會這樣做的：透過在包含的h2 上設定border-bottom，然後給h2 設定較小的line-height 來建立線條。然後將文字放在一個嵌套的 span 中，具有非透明的背景。

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

<h2><span>这是一个测试</span></h2>
<p>这是一些其他内容</p>