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 。

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.

我该怎么办？

推荐答案

把你的右对齐文本放在中心一个：

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>

这篇关于CSS：我如何正确对齐文本对中心文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！