I need to evenly place the following data on one line:

'27.07.2017', 'USD: 59,91', 'Euro: 69,68', 'Brent: 50,91', 'Π’Ρ‹ вошли ΠΊΠ°ΠΊ Guido' .

Exchange rates and oil should be in the middle. For this, I used a simple <pre> without any styles, with dozens of spaces.

  • What does it mean evenly? Evenly about what? - Cheg
  • Date on the left, authorization on the right, everything else in the center - Anton

4 answers 4

You can use float in styles to "scatter" the necessary blocks on the left and right, leaving everything else in the center:

 <p style="text-align: center"> <span style="float: left">27.07.2017</span> <span>USD: 59,91</span> <span>Euro: 69,68</span> <span>Brent: 50,91</span> <span style="float: right">Π’Ρ‹ вошли ΠΊΠ°ΠΊ Guido</span> </p>

    Flexbox Option

     .flex { display:flex; text-align:center; } .flex * { flex: 1 0 auto; } .flex *:first-child { text-align:left; } .flex *:last-child { text-align:right; } 
     <div class="flex"> <div>27.07.2017</div> <div>USD: 59,91, Euro: 69,68, Brent: 50,91</div> <div>Π’Ρ‹ вошли ΠΊΠ°ΠΊ Guido</div> </div>

      You can use flexbox. And for children, set the margin auto to move the blocks to the maximum distance. Although I would advise not to rely on block numbers in the markup, but add the appropriate classes. Demonstration:

       .flex { display: flex; } /* Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π±Π»ΠΎΠΊ ΠΈ послСдний ΡΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ максильно Π²ΠΏΡ€Π°Π²Π° */ .flex > :nth-child(2), .flex > :last-child { margin-left: auto; } /* ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ ΠΎΡ‚ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ Π½Π° 10px Π²ΠΏΡ€Π°Π²Π° */ .flex > :not(:nth-child(2)), .flex > :not(:last-child) { margin-left: 10px; } 
       <div class="flex"> <div class="flex__item">27.07.2017</div> <div class="flex__item">USD: 59,91</div> <div class="flex__item">Euro: 69,68</div> <div class="flex__item">Brent: 50,91</div> <div class="flex__item">Π’Ρ‹ вошли ΠΊΠ°ΠΊ Guido</div> </div>

        All the data is dynamically added? If so, then you need to put them in a single <div> or <p> and correctly register in CSS. If you use a Grid (Bootstrap, for example) - this is one way to solve, if you write styles yourself - another. For example:

         <p> <span class="right">27.07.2017</span> <span class="center">USD: 59,91</span> <span class="center">Euro: 69,68</span> <span class="center">Brent: 50,91</span> <span class="left">Π’Ρ‹ вошли ΠΊΠ°ΠΊ Guido</span> </p>

        • Styles please too - Anton
        • @Anton and styles depending on how everything is built with you. If you use some kind of framework - you need to dance from it, if you write yourself - this is another. You can make the table in one row and adjust the width of each cell so that the text is aligned as you need. - anst-foto
        • Yes, styles in manual. I have no idea how to write them. Please write your version of the styles (any, which is simpler) - Anton
        • In the current form is not the answer, since the example in the answer does not make any uniform distribution - andreymal