Saqib Ali Saqib Ali - 1 month ago 13
CSS Question

CSS: How can I right-justify text against centered text?

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.

Answer

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>

Comments