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

Question

How can I have text aligned to the right, but at the same time the text is in the center?

The longest line will be centered, shorter lines will be aligned to right until their most right character is at the same spot the longest line's character is?

Simplified version of current code:

<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

If I'm understanding your question correctly, the best way to achieve what you're asking is to put your text inside another div , set it's text-align to end , and set its parent to display: flex; justify-content: center; display: flex; justify-content: center; Here is your code with those changes:

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

I recommend that you don't use inline styles, as it is difficult to read and maintain.