CODEWITHSUNDEEP
htmlcssalignment
u15p7fgy863eiq5
u15p7fgy863eiq5

Reputation: 215

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

Upvotes: 1

Views: 41

Answers (1)

MikhaD
MikhaD

Reputation: 137

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

Upvotes: 1

Related Questions