[英]How can I have text aligned right, but the div aligned center?
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> </label><kbd id="item1">Equal amount of stuff</kbd> <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> </label><kbd id="item2">Equal amount of stuff</kbd> <button class="copyButton btn btn-default" id="copyButtonId"
data-clipboard-action="copy" data-clipboard-target="kbd#item2">
Copy
</button>
</div>
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;
如果我正确理解你的问题,实现你所要求的最好方法是将你的文本放在另一个
div
,将它的text-align
设置为end
,并将其父级设置为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> </label><kbd id="item1">Equal amount of stuff</kbd> <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> </label><kbd id="item2">Equal amount of stuff</kbd> <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.我建议您不要使用内联样式,因为它很难阅读和维护。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.