如何让文本右对齐，但 div 居中对齐？

Question

如何让文本向右对齐，但同时文本位于中心？

最长的行将居中，较短的行将向右对齐，直到它们最右边的字符与最长行的字符位于同一位置？

当前代码的简化版本：

<div style="text-align:right;content-align:center">
<label><b>Longer item:</b>&nbsp;&nbsp;</label><kbd id="item1">Equal amount of stuff</kbd>&nbsp;&nbsp;<button class="copyButton btn btn-default" id="copyButtonId"  
 data-clipboard-action="copy" data-clipboard-target="kbd#item1">
         Copy
     </button>
    <br><br>
    <label><b>Shorter:</b>&nbsp;&nbsp;</label><kbd id="item2">Equal amount of stuff</kbd>&nbsp;&nbsp;<button class="copyButton btn btn-default" id="copyButtonId"  
 data-clipboard-action="copy" data-clipboard-target="kbd#item2">
         Copy
      </button>
</div>

更好的版本在 codepen 。

Answer 1

如果我正确理解你的问题，实现你所要求的最好方法是将你的文本放在另一个div ，将它的text-align设置为end ，并将其父级设置为display: flex; justify-content: center; display: flex; justify-content: center; 这是带有这些更改的代码：

<div style="display: flex; justify-content: center;">
  <div style="text-align: end;">
    <label><b>Longer item:</b>&nbsp;&nbsp;</label><kbd id="item1">Equal amount of stuff</kbd>&nbsp;&nbsp;<button class="copyButton btn btn-default" id="copyButtonId"  
 data-clipboard-action="copy" data-clipboard-target="kbd#item1">
         Copy
    </button>
    <br><br>
    <label><b>Shorter:</b>&nbsp;&nbsp;</label><kbd id="item2">Equal amount of stuff</kbd>&nbsp;&nbsp;<button class="copyButton btn btn-default" id="copyButtonId"  
 data-clipboard-action="copy" data-clipboard-target="kbd#item2">
         Copy
    </button>
  </div>
</div>

我建议您不要使用内联样式，因为它很难阅读和维护。