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

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 должен иметь указанную ширину.

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