如何讓文本右對齊，但 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>

我建議您不要使用內聯樣式，因為它很難閱讀和維護。