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


Tags: html,css

Problem :

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.



Solution :

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

    How to style QTableView CSS

    how to position a search bar in html/css

    Showing ellipsis in CSS table-cell element

    How can I use CSS styling in my GTK# application?

    How to set background gradient css via javascript [duplicate]

    html element h1 with links as background image show them in one line

    Css accordion menu, how to set height to automatic?

    How to avoid the text inside the bootstrap button overflow?

    Why does an absolutely positioned child expand container height and how to prevent this?

    How to make text appear under div without moving other items in list?

    How did infusion.com skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    Thai line breaking: how to break Thai text effectively

    How to edit menu in header - wordpress

    How to display components horizontally with CSS

    How do I keep a horizontal column of divs in the same row when it is extends past the screen?

    How to style Repeater item background color ontap?

    How do I set the height of an iframe with the min-height property in the body?

    How to prevent rightmost inline element from wrapping or overflowing in CSS?

    How to reapply new text format in CSS after removing format initially

    How to align arrows using CSS or jQuery or JavaScript [closed]

    How to move menu to the right of the logo and to clean up unused space?

    How to add style to android app

    How to have only a vertical scroll bar on a div

    how to insert a ribbon inside a div how background without images only pure css? [closed]

    How can I resize svg using CSS?

    How to make “button-like appearance” with CSS

    How to use vertical align in bootstrap

    How can I float dynamic div's next to each other?

    How to draw a checkmark / tick using CSS?

    How to set the id of a 'label' HTML element?