css - テキストを左揃えにして同じ行の中央に配置する

Question

div中央揃えのテキストと左揃えのテキストの両方を同じ行に配置する必要があります。この jsfiddle は、私がこれまでに持っているものを示しています: http://jsfiddle.net/nDqvT/

問題は、左揃えのテキストが中央揃えのテキストを中央から押し出すことです。これを回避する方法はありますか？

Answer 1

左のテキストに幅を割り当てることができる場合は、中央のテキストにオフセット マージンを割り当てることができます。

http://jsfiddle.net/nDqvT/1/

Answer 2

これは正しいです ？ http://jsfiddle.net/nDqvT/36/

Answer 3

どうぞ。

http://jsfiddle.net/nDqvT/57/

改行<br />は、ラッパーdivに高さがあることを確認するために使用されます。これがないと、ラッパーはコンテンツ フロー内で空に見えます。の代わりに、ラッパーに高さを使用するか、単に割り当てる<br />ことができます。 

<div id="wrapper">
    <div id="left">Left Left Left Left Left Left Left Left</div>
    <div id="centered">Centered</div>
    <br/>
</div>

 

#wrapper {
    position: relative;
    display: block;
    width: 100%;
}
#left { 
    position: absolute;
    text-align: left;
    top: 0;
    left:0;
}
#centered {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 0;
    left: 0;
}

編集：

このソリューション全体では、OP に従ってテキストがすべて 1 行に収まることを前提として います。

1 行より長いものは、折り返すために末尾に到達する必要がありますdiv。divウィンドウの端より前に a の終わりに到達するには、 にdiv指定された幅が必要です。

OP は、divの幅を指定したり、テキストが互いに重なったりすることを望んでいません。したがって、OPのさまざまな制約が互いに矛盾しているように見え、理想的な解決策を妨げています。