Skip to content Skip to sidebar Skip to footer
Home / Css / Html

CSS: How Can I Right-justify Text Against Centered Text?

Post a Comment
Given the following HTML:
A 1 A 1 A 1
B 2 B

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

Solution 2: 

.css_class_2{
  text-align: right;
}

.css_class_3{
  text-align: right;
}
.css_class_1{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%)
}
<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>

Solution 3: 

.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;
}
<div class="css_class_1">
  <div class="parent">
  <div class="css_class_2">
    A 1 A 1 A 1
  </div>
  <div class="css_class_3">
    B 2 B 2
  </div>
  </div>
</div>

Solution 4:

You just need to give the following 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>

Or

If you are fine with CSS3's width: max-content, you can make it smaller.

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

Post a Comment for "CSS: How Can I Right-justify Text Against Centered Text?"