CSS文本对齐权不起作用。 怎么解决？

Question

 <div style="text-align: left;width: 21cm;"> <h4 style="text-align: center;font-weight: bold;font-size: 20px;margin: 0">Tax Invoice(Center) <span style="text-align: right;"> For Client(Right)</span></h4> </div> 

I want to display text

For Client(Right)

To the right Side but it displays in the center. How can I display it on the right side?

Answer 1

 <div style="text-align: left;width: 21cm;"> <h4 style="text-align: center;font-weight: bold;font-size: 20px;margin: 0">Tax Invoice(Center) <span style="float: right;"> For Client(Right)</span></h4> </div> 

Use float: right; to achieve the desired output

Answer 2

Try this

<div style="display: flex; justify-content: space-between;width: 21cm;margin:auto">
  <span style="text-align: center;width:100%">Tax Invoice(Center)</span><span style="white-space: nowrap">For Client(Right)</span>
</div>

Answer 3

An alternative option

 .header-line { width:100%; background:#eee; } .head-33 { display:inline-block; width:33.3%; line-height:48px; font-size:1em; font-weight:bold; text-align:center; } 

 <!-- Note: Open div must butt up againsts previous close div --> <div class="header-line"><div class="head-33">Left</div><div class="head-33" style="background:#efe">Center</div><div class="head-33">Right</div></div> 

Answer 4

Tax Invoice(Center) For Client(Right)

 <div< style="text-align: left;width: 21cm;"> <h4 style="text-align: center;font-weight: bold;font-size: 20px;margin: 0">Tax Invoice(Center) <span style="float: right;"> For Client(Right)</span></h4> </div> 

Answer 5

Change to

<span style="text-align: right;"> For Client(Right)</span>

You will get the result you want.