CSSの左と右のボーダーのタイトル

私は基本的に次の画像タイトル、 "経験"を再現する必要があります：

enter image description here

私はそれをどのようにすることができますか？

ありがとうございました！

0
追加された
ビュー: 7
源

3 答え

Something like this probably do the job: http://jsfiddle.net/R52sq/1/

浮き沈みをしないでください。 1つの追加タグしか持たず、任意の長さのコンテンツを持つことができます（ブラウザーの幅もさらに大きくなります）。

欠点のみがIE6ではうまくいかず、IE7で部分的にしか機能しない可能性があります（IE7でのテストが必要で、現在のコンピュータでは必要ありません）。

2
追加された
源

divを使用すると、このトリックを行う必要があります：

HTML：

<div id="left"></div><div id="title">Experience</div><div id="right"></div>

CSS：

#left {
    width:40%;
    float:left;
    border-bottom:1px solid #CCC;
    height:20px;
}
#right {
    width:40%;
    float:left;
    border-bottom:1px solid #CCC;
    height:20px;
}
#title {
    width:20%;
    float:left;
    height:20px;
    text-align:center;
}
0
追加された
源

https://jsfiddle.net/5jge1qnx/

HTML 

<div class="title">
    
Title

</div>

CSS 

.title {
   width:100%;
   text-align:center; 
   position: relative;
}

h1 {
   position:relative; 
   padding:10px; 
   background: #f3f5f6;
   display: inline-block;
   z-index: 1;
}

.title::after {
   content:'';
   position: absolute;
   left: 0;
   right: 0;
   top: 50%;
   height: 1px;
   background: #000;
   z-index:0;
}

あなたのタイトルの背景に注意してください！それはあなたの親要素または身体の背景と同じでなければなりません！

0
追加された
源