상자 테두리 중간에 텍스트 정렬

Question

왼쪽 텍스트 상자의 가운데에 동적 텍스트를 정렬 할 수 있습니까?

 Text 
     | 
     Another text 

그러나 필자는이 효과를 달성하기 위해 노력 :

 Text 
     | 
    Another text 

내가 돈을 CSS없이 요소의 초기 화면의 모든 요소가 같은 경계에 정렬 될 때 다음과 같습니다

제대로 설명 할 수있는 방법을 알고 있으므로 JSFiddle을 만들어서 보여 주겠다. https://jsfiddle.net/pkpy27oh/

나는 div와 div 아래에 텍스트를 가운데에 놓기를 원한다. rder. 음의 마진은 정적 문자열을 취할 공간을 알지만 동적 문자열을 사용하면 미리 정의 된 음수 여백으로 수행 할 수있는 작업이 아닌 경우 조정할 수 있습니다. JavaScript없이 CSS 만 사용하려고합니다.

최대 폭을 설정하고 텍스트를 가운데로 정렬 한 다음 최대 폭의 절반까지 음수 여백을 설정하려고했지만 더 나은 방법이 있는지 궁금합니다. 인라인 블록 및 텍스트 정렬 : 센터 :

Answer 1

당신은 디스플레이를 사용할 수 있습니다

Example Updated 확실히 이상한 요구 사항입니다

<div class="container"> 
    <div class="inline-block"> 
    <div>Text</div> 
    <div style="border-left: 1px solid #000; display: inline-block;">&nbsp;</div> 
    <div>Longer text</div> 
    </div> 
</div> 

.container { 
    margin: 10px 50px; 
    text-align: left; 
} 

.inline-block { 
    display: inline-block; 
    text-align: center; 
    transform: translateX(-50%); 
} 

Answer 2

.

.container { 
 
    margin: 10px 50px; 
 
} 
 

 
.offset { 
 
    display:inline-block; 
 
    transform: translateX(-50%); 
 
}

Problem: 
 

 
<div class="container"> 
 
    <div class="offset">Text</div> 
 
    <div style="border-left: 1px solid #000;">&nbsp;</div> 
 
    <div class="offset">Longer text</div> 
 
</div> 
 

 
Expected result: 
 

 
<div class="container"> 
 
    <div style="margin-left: -15px">Text</div> 
 
    <div style="border-left: 1px solid #000;">&nbsp;</div> 
 
    <div style="margin-left: -35px">Longer text</div> 
 
</div>

display:inline-block는 짧은 폭까지 요소를 축소하고 transform:translateX(-50%)는 그 폭의 절반을 상쇄 : transform:translateX 사용자의 요구 사항에 대해 받아 들일 경우이 작업을 시도 할 수 있습니다.

Answer 3

컨테이너의 항목을 가운데에 정렬하고 테두리가있는 div에 1px 폭을 지정하기 만하면됩니다.

<div class="container" style="text-align: center;"> 
    <div>Text</div> 
    <div style="border-left: 1px solid #000; width: 1px; margin-left: auto; margin-right: auto;">&nbsp;</div> 
    <div>Longer text</div> 
</div> 

https://jsfiddle.net/pkpy27oh/8/