Question

给出以下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。

Answer 1

＆＃13;

.css_class_2{
  text-align: right;
}

.css_class_3{
  text-align: right;
}
.css_class_1{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%)
}

＆＃13;

<body>
    <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>
</body>

＆＃13;

Answer 2

将右对齐文本放在中心文本中：

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

Answer 3

Top

.css_class_2 {
  text-align: center;
  border-right: 2px solid dodgerblue;
  background-color: peachpuff;
  margin-bottom: 10px;
}
.css_class_3 {
  text-align: right;
  border-right: 2px solid dodgerblue;
  background-color: peachpuff;
  margin-bottom: 10px;
}
.css_class_1 {
  text-align:center;
}
.parent {
  display:inline-block;
}

Answer 4

您只需要提供以下css

.css_class_1 {
  display: inline-block;
  text-align: right;
}
body {   /* or grand parent element */
  text-align: center;
}

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

或

如果您对CSS3的width: max-content没问题，可以缩小它。

.css_class_1 {
  text-align: right;
  width: max-content;
  margin: 0 auto;
}

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

CSS：如何针对居中文本对文本进行右对齐？

4 个答案: