css -- put something to the left of a centered element?

Question

The picture shows what I want to achieve. Can it be done?

For centering, without the putting something to the left part, see here: How do I center float elements?

Answer 1

Yes! That can be achieved by absolute positioning, if you are careful about what you do.

First, the make a wrapper <div>, with the centered text <div>, containing a child (left-positioned) <div>.

<div class='wrapper'>
    <div class='centered'>
        This text is horizontally centered.
        <div class='left'>
            This text is to the left of the centered text.
        </div>
    </div>
</div>

Then, set the text-align of the wrapper to center:

.wrapper {
    text-align: center;
}

Set the centered text display: inline-block and position: relative:

.centered {
    display: inline-block;
    position: relative;
}

And finally, position the left text absolute with right: 100%:

.left {
    position: absolute;
    right: 100%;
    width: 100px;
    top: 0;
}

Here's the JSFiddle: http://jsfiddle.net/jeremyblalock/28q08auq/1/