Left align and center text on the same line

I have a div in which I need to have both centered text and left-aligned te开发者_StackOverflow中文版xt on the same line. This jsfiddle demonstrates what I have so far: http://jsfiddle.net/nDqvT/

The problem is that the left-aligned text pushes the centered text off-center. Is there any way to avoid this?

If you can assign a width to the left text, you can then assign an offsetting margin to the centered text.

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

Is this correct ? http://jsfiddle.net/nDqvT/36/

Here you go.

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

The line break <br /> is used to ensure that the wrapper div has height. Without it, the wrapper looks empty within the content flow. Instead of <br />, you could use   or just assign a height to the wrapper.

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

EDIT:

This entire solution assumes the text will all fit on one line as per the OP: "I need to have both centered text and left-aligned text on the same line."

Anything longer than one line and it needs to hit the end of the div in order for it to wrap. To reach the end of a div before the edge of the window, the div must have a specified width.

The OP does not want the div's to have a specified width nor does he want the texts to overlap each other. Therefore, it seems like the various constraints of the OP are in conflict with each other which precludes an ideal solution.