时间戳

首页 > 解决方案 > 我怎样才能让文本正确对齐，但 div 对齐中心？

html - 我怎样才能让文本正确对齐，但 div 对齐中心？

问题描述

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

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

当前代码的简化版本：

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

标签： htmlcssalignment

解决方案

如果我正确理解了您的问题，那么实现您所要求的最佳方法是将您的文本放入 anotherdiv中，将其设置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>

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

推荐阅读