居中和右对齐

Question

在许多有分量和严肃的著作中，尤其是那些由英国著名的 女王陛下文具办公室 (HMSO) 出版的著作中，可以看到大量的 table。

通常如果该列包含数字数据，它不仅在该列中居中，而且在该中心点右对齐 ，这样数字的 last 数字就是居中的实体。这种布局可能是由 HMSO 样式规则决定的。

我碰巧有 第二世界历史 War - 英国军事丛书 - War 1939-1945 年海上 - 第一卷 - 第 336 页 - Defensive，我在上面找到了符合上述描述的table。

使用老式的凸版印刷，甚至是铁水印刷，这无疑是完全手动且乏味的，但相对简单——只需使用或多或少的行距，直到它排成一行。

但我想知道是否可以用 Microsoft Word 完成 and/or HTML/CSS，最好两者都可以。

Answer 1

这可以在 HTML/CSS 中通过用居中的 inline-block 元素包裹文本来实现：

.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>

Answer 2

丰富@casgage的回答：如果您尝试对同一 table 中的不同行执行此操作（即值位于同一列的不同单元格中），则需要为 .wrap class。 min-width 必须是使所有包装容器具有相同大小的值。使用其他答案中的示例：

.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>

居中和右对齐

Center AND Right Align

html

css

ms-word

center

right-align