Center AND Right Align

Question

In many weighty and serious tomes, particularly those published by the UK's venerable Her Majesty's Stationery Office (HMSO), one sees a great number of tables.

Often if the column contains numeric data, not only is it centred in the column, but also right aligned on that centre point, such that the last digit of the number is the entity that is centred. This layout is probably dictated by HMSO style rules.

I happen to have before me page 336 of History of the Second World War - United Kingdom Military Series - The War at Sea 1939-1945 - Volume I - The Defensive, and I find thereon a table matching the above description.

Using old-fashioned letterpress, or even in hot metal, it's admittedly totally manual and tedious, but relatively straightforward -- just use more or less leading until it lines up.

But I would like to know if it can it be done with Microsoft Word and/or HTML/CSS, preferably both.

Answer 1

This can be accomplished in HTML/CSS by wrapping the text with a centered inline-block element:

.wrap {
  text-align:right;
  border: 3px dotted blue;  
  display: inline-block;
}
.container {
  border: 10px solid red;
  text-align: center;
}

<div class="container">
  <div class="wrap">
    Line 1 asddsa<br>
    Line 2 asdasdf<br>
    Line 3 asdfasdfasdf<br>
    Line 4 dsdf<br>
    Line 5<br>
    Line 6 s
  </div>
</div>