Place a center aligned block inside another block.
Its really very simple ;)
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
<style type="text/css"> .align_center { position: relative; width: 100%; } .align_center:after { content: ''; display: block; clear: both; } .align_center_to_left { position: relative; right: 50%; float: right; } .align_center_to_right { position: relative; z-index: 1; right: -50%; } </style> <div class="align_center" style="border: 1px dashed red; color: red;"> Alignment with respect to this block <div class="align_center_to_left"> <div class="align_center_to_right" style="margin: 1em 0; border: 1px dashed green; color: green;"> Block width depending on line length </div> </div> </div>