左对齐和居中对齐 div 中的项目？

Question

How can I layout the contents of a div with one element centred and the other aligned left.

I've tried flexbox - not possible without adding a hidden 3rd element and justifying content.

I've also tried text align on parent but then everything is aligned in one way (centered or left).

HTML:

 .left{ } .center{ }

 <div class="container"> <div class="left"> I'm left aligned </div> <div class="center"> I'm center aligned </div> </div>

Edit:

Im aligning the divs themselves, and centered relative to parent.

Answer 1

you can use flex and :after element for the hidden element:

 .container { display: flex; border: 1px solid #000; } .container:after { content: " "; display: block; flex: 1; } .left, .center { border: 1px solid #0F0; flex: 1; text-align: center; }

 <div class="container"> <div class="left"> I'm left aligned </div> <div class="center"> I'm center aligned </div> </div>

Answer 2

RESULT

How can I layout the contents of a div with one element centred and the other aligned left.

You can use % based widths and just divide it up like so

 .container { border: 1px solid; width: 500px; height: 200px; //text-align: center; } .left { float: left; width: 33.33% } .right { float:left; width:33.33%; text-align:right; } .center { float: left; width: 33.33%; text-align:center; }

 <div class="container"> <div class="left"> I'm left aligned </div> <div class="center"> I'm center aligned </div> <div class="right"> An examplatory div... </div> </div>