두 줄 사이에 텍스트를 만드는 방법은 무엇입니까?

Question

안녕하세요 저는 텍스트와 줄이 있습니다. 내 HTML 코드에서

은 다음과 같습니다 :

<div class="container"> 
     <div class="line"></div> 
      <h2>Some Text!!!</h2> 
     <div class="line"></div> 
</div> 

CSS :

.container { 
text-align: center; 

}

.line { 
    height: 5px; 
    background: #FFEE90; 
} 

는이 같은 그림 모양을 만들 필요가

줄 사이에 텍스트를 배치하려면 무엇을 써야합니까?

Answer 1

이것을 시도해보십시오 (한 줄을 사용하고 rela H2 요소적인 위치)

jsfiddle.net/td8L8/

Answer 2

여러 가지 방법으로이를 달성 할 수 있습니다.

당신은 이전과 및 의사 요소

p:before { 
    content: "_____"; 
    color: blue; 
    position: absolute; 
    top: -5px; 
    left: -45px; 
} 

p:after { 
    content: "_____"; 
    color: blue; 
    position: absolute; 
    top: -5px; 
    right: -45px; 
} 

예 후 내용 라인을 추가 할 수 있습니다 http://jsfiddle.net/82EvC/1/

: http://jsfiddle.net/82EvC/

또 다른 방법은

p:before { 
    content: ""; 
    border: 1px solid blue; 
    position: absolute; 
    width: 50%; 
    top: 8px; 
    left: -45px; 
} 

p:after { 
    content: ""; 
    border: 1px solid blue; 
    width: 50%; 
    position: absolute; 
    top: 8px; 
    right: -45px; 
} 

예를 들어 경계 라인이 될 수

Answer 3

이보십시오. 전체 너비 라인 및 일부 html. 나는이 여기에 최소 2 번 요청되었습니다 본 적이

<div class="line"><span>Some text</span></div> 


.line { 
    position: relative; 
    text-align: center; 
} 
.line:after { 
    content: ""; 
    border-bottom: 1px solid #ccc; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    right: 0; 
    width: 100%; 
    z-index: -1; 
} 
.line span { 
    padding: 0 8px; 
    background-color: white; 
    position: relative; 
}