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?
Add a comment |
1 Answer
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/
2 Comments
William Jockusch
Almost . . . the only problem is that the width of the "left" part is set to a "magic number" of 100px, rather than adjusting itself to the available space on the page.
Jeremy Blalock
As flexbox has gained more widespread adoption, this is also a good approach. See an example here