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.

Fleurdelis

Are you talking the first edition or the third edition of History of the Second World War - United Kingdom Military Series - The War at Sea 1939-1945 - Volume I - The Defensive. Please be precise so I know exactly where to look. – Spraddle

First edition 1954 – Fleurdelis

I was being sarcastic. I don't just happen to have that book lying around in 2 versions. Does my answer below solve your problem? – Spraddle

Yes, many thanks, it is a solution, and I should have thought of that myself, as I have been using CSS since it was a twinkle in the eye of the internet. It must be old age. – Fleurdelis

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>

Spraddle

How can you do this inside a <TD> tag – Lightfingered

@Lightfingered You can do it exactly the same way as I did in this answer. Here's an example: jsfiddle.net/vwkjp3zq/1. – Spraddle

Answer 2

Enriching @casgage's answer: If you are trying to do this with different rows in the same table (i.e. the values are in different cells from the same column), you need to set a min-width value for the .wrap class. The min-width must be a value that makes all the wrapping containers of the same size. Using the examples from the other answer:

.wrap {
    text-align: right;
    border: 2px dotted blue;
    display: inline-block;
    min-width: 150px;
}
.container {
    border: 2px solid red;
    text-align: center;
    min-width: 500px;
    padding: 5px;
}

<table>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 1 asddsa
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 2 asdasdf
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 3 asdfasdfasdf
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 4 dsdf
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 5
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 6 s
            </div>
        </td>
    </tr>
</table>

Secco