如何让文本右对齐，但 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>

Better version at codepen.

Answer 1

如果我没有正确理解你的问题，实现你所要求的最好方法是将你的文本放在另一个 div 中，将它的 text-align 设置为 end ，并将其父项设置为 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>

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

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

How can I have text aligned right, but the div aligned center?

html

css

alignment