Как выровнять текст по правому краю, но по центру 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>

Лучшая версия в коде .

Answer 1

Если я правильно понимаю ваш вопрос, лучший способ добиться того, что вы спрашиваете, - это поместить ваш текст в другой div, установить для text-align значение end и установить для его родителя значение * 1004. * Вот ваш код с этими изменениями:

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

Я рекомендую не использовать встроенные стили, так как его трудно читать и поддерживать.