Вывод двух блоков в одну строку по центру

[Densport]

Здравствуйте, помогите, пожалуйста, разобраться, какие стили нужно поправить, либо каких не хватает, чтобы получилось:

 

Выровнять два блока (цена и вес) по центру, (чтобы автоматически отцентрировались).

 

Сейчас так: 

 

 

Нужно чтобы получилось так:

 

 

Как формируются блоки:

 

- в коде html идет вывод в таком порядке:

<div class="weight>за 1 кг</div>
<div class="price">1 700 руб.</div>

- css классы:

.product .weight {
    color: #888;
    display: inline-block;
    float: right;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5em;
    margin: 2px 0 0;
}

.product .price {
    display: inline-block;
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1em;
    margin: 2px 0 16px;
}

.product {
    text-align: left;
}

Я нашел решение, только при условии, если переписать вывод html (поменять местами блоки и вместо float:right сделать float:left и text-align:centr для класса .product). Тогда получается вывести по центру.

 

НО, мне важно решить задачу, не меняя html, только стилями. (Потому, что если придется менять html, это нужно будет делать в 6-7 файлах, таких как поиск, категории, модули которые выводят товары типа акции, последние и т.д.)

 

Если кто-то сталкивался с подобной задачей, или знает, как поправить стили, пожалуйста, подскажите!

Змінено 8 квітня 2016 користувачем Densport

[mazein]

.product .weight {

color: #888;

display: inline-block;

/*float: right;*/

font-size: 1em;

font-weight: 500;

line-height: 1.5em;

margin: 2px 0 0;

width: 50%;

text-align: left;

}

.product .price {

display: inline-block;

font-size: 1.2em;

font-weight: 500;

line-height: 1em;

margin: 2px 0 16px;

width: 50%;

text-align: right;

}

.product {

text-align: center;

}

Змінено 8 квітня 2016 користувачем mazein

[Densport]

.product .weight {
    color: #888;
    display: inline-block;
    /*float: right;*/
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5em;
    margin: 2px 0 0;
    width: 50%;
    text-align: left;
}

.product .price {
    display: inline-block;
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1em;
    margin: 2px 0 16px;
    width: 50%;
    text-align: right;
}

.product {
    text-align: center;
}

 

Спасибо, что предложили вариант. Я так уже пробовал. Это вариант не работает корректно. Элементы выравниваются не строго по центру. Так как размер контента в блоке с ценой, длиннее, чем в блоке с весом. И при выводе это сильно видно, что элементы не по центру. Наверно нужен способ без указания ширины. Пока не удается найти.

[mazein]

Просто ссылку на эту страницу можно?

[Densport]

Просто ссылку на эту страницу можно?

 

Отправил ссылку Вам в личном сообщение, чтобы не расценили админы, что это спам.

[Densport]

Уважаемые разработчики, если ещё у кого-нибудь есть варианты, как можно стилями добиться нужного результата, буду очень признателен услышать Ваше мнение.