テキストをボックスの枠線の中央に揃える

Question

ダイナミックテキストをその左側のボックスの中央に揃えることは可能ですか？

CSSのない要素の初期表示すべての要素が同じボーダーに合わせているよう次のようになります。

 Text 
     | 
     Another text 

しかし、イムはこの効果を達成しようとしている：

 Text 
     | 
    Another text 

Iドンそれを正しく説明する方法を知っているので、私はそれを示すためにJSFiddleを作成しました：https://jsfiddle.net/pkpy27oh/

私は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/