Densport

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

Рекомендуемые сообщения

Densport    0

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

 

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

 

Сейчас так

 

image987977.jpg

 

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

 

image987979.jpg

 

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

 

- в коде 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 файлах, таких как поиск, категории, модули которые выводят товары типа акции, последние и т.д.)

 

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

Изменено пользователем Densport

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
mazein    186


.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    0
.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    186

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Densport    0

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Densport    0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Похожий контент

    • От Yuriy1987
      Приветствую! Подскажите как можно оформить кнопку в виде параллелограмма. Те боковые стороны должны быть наклонными. Проблема в том, что с помощью transform: skewX наклоняется так же и текст кнопки (значение value). Интересует именно наклон а не использование изображение в качестве кнопки.
      Может кто нибудь сталкивался со схожей ситуацией?
      Заранее благодарен!
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу