Выровнять по левому краю и отцентрировать текст на одной строке

Question

У меня есть div, в котором мне нужно расположить текст по центру и текст по левому краю на одной строке.Этот jsfiddle демонстрирует то, что я имею до сих пор: http://jsfiddle.net/nDqvT/

Проблема в том, что выровненный по левому краю текст выталкивает центрированный текст не по центру.Есть ли способ избежать этого?

Answer 1

Это правильно?http://jsfiddle.net/nDqvT/36/

Answer 2

Если вы можете назначить ширину левому тексту, вы можете назначить смещающее поле для центрированного текста.

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

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;
}

РЕДАКТИРОВАТЬ:

Все это решение предполагает, что текст будет помещаться на одной строке в соответствии с ОП: "Мне нужно, чтобы текст по центру и текст с выравниванием по левому краю были на одной строке ."

Все, что длиннее одной строки, и оно должно достигать конца div, чтобы его можно было обернуть.Чтобы достичь конца div до края окна, div должен иметь указанную ширину.

OP не хочет, чтобы div имел указанную ширину, и при этомон хочет, чтобы тексты перекрывали друг друга.Поэтому кажется, что различные ограничения ОП противоречат друг другу, что исключает идеальное решение.