CSS：如何针对居中文本对文本进行右对齐？(CSS: How can I right

CSS：如何针对居中文本对文本进行右对齐？(CSS: How can I right-justify text against centered text?)

给出以下HTML：

<div class="css_class_1"> <div class="css_class_2"> A 1 A 1 A 1 </div> <div class="css_class_3"> B 2 B 2 </div> </div>

我想将文本A 1 A 1 A 1水平居中。 我想使文本B 2 B 2右对齐，使其右边界与A 1 A 1 A 1的右边界对齐。

我该怎么做？ 请显示我应该为上述三个类中的每一个定义的css。

Given the following HTML:

<div class="css_class_1"> <div class="css_class_2"> A 1 A 1 A 1 </div> <div class="css_class_3"> B 2 B 2 </div> </div>

I would like to make the text A 1 A 1 A 1 horizontally-centered. And I would like to make the text B 2 B 2 right-justified so that it's right border is aligned with the right border of A 1 A 1 A 1.

How can I do it? Please show the css I should define for each of the three mentioned classes.

最满意答案

将右边的文本置于中心位置：

.css_class_1 {
  background: green;
  padding: 10px;
}

.css_class_2 {
  background: yellow;
  text-align: center;
  display: inline-block;
}

.css_class_3 {
  background: red;
  text-align: right;
} 
  
<div class="css_class_1">
    <div class="css_class_2">
        A 1 A 1 A 1
      
      <div class="css_class_3">
          B 2 B 2
      </div>
    </div>
</div> 
  
 
Put your right justify text inside the center one:
 
 
 
  
  
.css_class_1 {
  background: green;
  padding: 10px;
}

.css_class_2 {
  background: yellow;
  text-align: center;
  display: inline-block;
}

.css_class_3 {
  background: red;
  text-align: right;
} 
  
<div class="css_class_1">
    <div class="css_class_2">
        A 1 A 1 A 1
      
      <div class="css_class_3">
          B 2 B 2
      </div>
    </div>
</div>