You need to position the div block horizontally in the center of the parent block, and the contents of the div block should be horizontally positioned on the right edge of the block.

 .parent { margin-top: 50px; border: 1px solid black; padding: 20px; } .child { margin: 0 auto; border: 1px solid green; padding: 10px; } .text-right { text-align: right; } 
 <div class="parent"> <div class="child"> <div class="text-right"> text 1 </div> <div class="text-right"> text 2 </div> </div> </div>

Text 1 and Text 2 should be in the middle and on different lines. I can not understand what to add is necessary.

Closed due to the fact that the essence of the question is not clear to the participants of VenZell , Bald , aleksandr barakin , user194374, D-side 2 Sep '16 at 8:04 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 3
    and what is the essence of the problem? I see the code, I see the code, I don’t see conclusions from what the code does not fit for the code, MasterAlex
  • association: stackoverflow.com/questions/114543 - user244413

2 answers 2

Centering text in a fixed width block

 .parent { margin-top: 50px; border: 1px solid black; padding: 20px; text-align: right; } .child { display: inline-block; border: 1px solid green; padding: 10px; text-align: center; width: 300px; } 
 <div class="parent"> <div class="child"> <div class="text"> text 1 </div> <div class="text"> text 2 </div> </div> </div>

Centering text with padding

 .parent { margin-top: 50px; border: 1px solid black; padding: 20px; text-align: right; } .child { display: inline-block; border: 1px solid green; padding: 10px; text-align: center; } 
 <div class="parent"> <div class="child"> <div class="text"> Lorem ipsum dolor </div> <div class="text"> Sit amet </div> </div> </div>

Since the author is confused in the title of the question and in the comments that he needs,
Here is an alternative solution for another problem he described:

Centering a block of fixed width inside the parent

 .parent { margin-top: 50px; border: 1px solid black; padding: 20px; text-align: center; } .child { display: inline-block; border: 1px solid green; padding: 10px; text-align: right; width: 300px; } 
 <div class="parent"> <div class="child"> <div class="text"> text 1 </div> <div class="text"> text 2 </div> </div> </div>

Centering the dynamic width block inside the parent

 .parent { margin-top: 50px; border: 1px solid black; padding: 20px; text-align: center; } .child { display: inline-block; border: 1px solid green; padding: 10px; text-align: right; } 
 <div class="parent"> <div class="child"> <div class="text"> Lorem ipsum dolor </div> <div class="text"> Sit amet </div> </div> </div>

  • Here's what you need "Centering a block of dynamic width inside a parent" - Dima Ipatov

Perhaps so:

 .parent { margin-top: 50px; border: 1px solid black; padding: 20px; text-align: right; } .child { margin: 0 auto; border: 1px solid green; padding: 10px; display: inline-block; } .text-right { } 
 <div class="parent"> <div class="child"> <div class="text-right"> text 1 </div> <div class="text-right"> text 2 </div> </div> </div>

  • Not that, since Text 1 and Text 2 should be in the middle and on different lines - Dima Ipatov
  • Corrected. But in general, you just need to write in the question that you specifically fail) - HamSter