텍스트가 삽입 된 가로 분배기

Question

나는 누군가가 나를 도울 수 있기를 바라고 있습니다. themeforest (http://themeforest.net/item/lespaul-retina-responsive-wordpress-theme/full_screen_preview/4083224 - 오른쪽 아래로 아래로 스크롤) 에서이 wordpress 템플릿에 본 원하는 효과를 달성하기 위해 노력하고있어.

기본적으로 페이지에서 반복되는 픽셀 구분 기호가 있으며 텍스트가 왼쪽에 삽입되어 있습니다. 내가 SOOO 많은 CSS 코드와 HTML을 시도했습니다 ... 그것은 쉬운 일이되어야하지만, 나는 그것을 얻을 수없는 것 같습니다.

나는이 효과를 달성하기 위해 왔 가장 가까운이 그 ​​아래 텍스트 가로 디바이더는 ...

//////////////////// /////////

TEXT (그러나 중심)

하지만

TEXT를하고 싶은 ///////////////// //////////

여기 내 코드가 있습니다.

div.divider17a { 
height:5px; width:100%; border:0; background:url(images/divider17.png) repeat-x; 
margin:35px 0 25px; 
padding:0; 
text-align:left; 
float:left; 
width:100%; 
} 
div.divider_notext { 
margin:50px 0 20px; 
} 
div.divider_left1 { 
text-align:left; 
} 

HTML

<div class="divider17a divider_left1"><h3>Strategic Planning</h3></div>

어떤 도움을 많이 주시면 감사하겠습니다 ... 감사합니다 = D

Answer 1

페이지 및 후속 코드에 대한 링크를 제공 할 수 있습니까? 당신이 그들의 코드를 보면 또한 경우이 그들이하는 일입니다 :

.separator-heading, hr.diagonal { 
background-image: url(../img/separator-heading-diagonal.png); 
background-repeat: repeat-x; 
background-position: 0 50%; 

}

Answer 2

당신은 단지 그들이 어쨌든 사용하는 것과 동일한 스타일을 사용하지 않는 이유가 있나요?

<h3 class="widget-heading separator-heading"> 
    <span class="text-holder">Companies that trust us</span> 
</h3> 

.separator-heading { 
    background-image: url(../img/separator-heading-diagonal.png); 
    background-repeat: repeat-x; 
    background-position: 0 50%; 
} 

.separator-heading .text-holder { 
    display: inline-block; 
    padding: 0 .6em 0 0; 
    background-color: white; 
} 

Answer 3

당신은 당신이 다음 CSS 스타일 사용할 수 있습니다 사용 텍스트가 경우

div.divider17a{ 
    overflow:hidden; 
    white-space:nowrap; 
} 

데모 : http://jsfiddle.net/kyBaN/1/

당신 컨테이너에 다음

.divider17a h3:after{ 
    content:"//////////////////////////////////////"; 
    overflow:hidden; 
} 

를 추가합니다

또는 배경 이미지를 사용하십시오.