There is a joint unit with the price of standard and discount. I want to change the output sequence of the standard price, then the discount, and both blocks should be displayed in the center and the price will be different each time (and therefore the width of the blocks will be different each time). How can this be done with styles without changing the structure of html ? fiddle

 del { float: right; } .price { text-align: center; } 
 <div class="price"><del><span class="amount">11.390&nbsp;<ruble title="руб.">руб.</ruble></span></del> <ins><span class="amount">9.340&nbsp;<ruble title="руб.">руб.</ruble></span></ins> </div>

    4 answers 4

    There is another option

     .price { position: relative; text-align:center; } del { position: absolute; top: 0; left: 50%; } ins { position: absolute; top: 0; right: 50%; }

    https://jsfiddle.net/skywave/y837g3gn/4/

    • oh so - super! I like. the only thing you need to put on 51% for indentation and for the price assign min-height - Vasya

    Here's how to reposition elements:

     .price{ width: 100%; display: inline-flex; flex-direction: row-reverse; align-items: center; justify-content: center; }
    • unfortunately, flex today is not yet cross-browser .. and with this approach elements will not be centered - Vasya
    • In fact, the best answer of all presented. - Vasily Barbashev
    • @ Vasily Barbashev I already wrote why he doesn’t fit .. I need a cross-browser solution and center alignment - Vasya
    • @ Vasya Yes, but the concept of cross-browser compatibility is already outdated. It's like using XP to this day, having at least Win7 on hand :) Jokes with jokes, but this is the most modern and clean approach. - Urmuz Tagizade
    • 2
      @ Vasya jsfiddle.net/do30p7ac please center . Using flex is the best tool for typesetting. Just a few people on it can do something. - Vasily Barbashev

    If there are no other inline elements nearby, can this approach help? jsfiddle.net/y837g3gn/2/

     <div class="price"><del><span class="amount">11.390&nbsp;<ruble title="руб.">руб.</ruble></span></del> <ins><span class="amount">9.340&nbsp;<ruble title="руб.">руб.</ruble></span></ins></div> del { float:left; margin-left: -50%; } .price { display: inline-block; margin-left: 50%; }


    If there is, then after dinner, you can pokoldovat more.

    • Discount price should go first - Vasya
    • one
      @ Vasya Dak change from del - float: left to float: right - Vasily Barbashev
    • @ Vasily Barbashev is better, but the price is offset from the center - Vasya
    • @ Oleg Degtev yes, let's make another decision - the decision is somewhere close - Vasya
    • Skywave came up with an interesting solution. There are extra lines, but the idea is good. Take advantage. - user200141

     .price { text-align: center; position: relative; min-height: 1px; } del { position: absolute; transform: translateX(5%); } ins { position: absolute; transform: translateX(-105%); } 
     <div class="price"> <del> <span class="amount">11.390&nbsp; <ruble title="руб.">руб.</ruble> </span> </del> <ins> <span class="amount">9.340&nbsp; <ruble title="руб.">руб.</ruble> </span> </ins> </div>

    • yes, super! just put 110% for indentation and you need to assign a min-height price so that the unit does not collapse and run over - Vasya
    • one
      @ Vasya, to add the distance between them, the indentation has changed by 5% and 105% - so it will be smoother relative to the center. and min-height I added, but this is another story, off topic) - lexxl
    • Let's continue the discussion in the chat . - lexxl