Почему линия у рейтинга не по середине?

Question

[evgemiil]

https://jsfiddle.net/evgeniel/7qzv479x/8/
Линия где рейтинг не по середине по вертикали, хотя свойства применил, подскажите пожалуйста.

Answer 1

[Xozin]

Нужно задать свойство vertical-align еще и блоку с классом rating_i, тогда результат будет таким, какой вы и ожидали

Comments

[evgemiil]

Спасибо) По качеству верстку можете оценить?

[Xozin]

Многое вам уже написали ниже, от себя добавлю, что меня пугают моменты в верстке, такие как "margin: -100%", по той простой причине, что это ниразу не интуитивно понятно.

Также, но это дело вкуса, я не люблю использование float, т.к. не люблю его поведение. Ну и, на мой взгляд, есть смысл отказаться от использования display: inline-block и float в пользу display: flex, если позволяют требования по кроссбраузерности

Answer 2

[Андрей Б.]

evgemiil Если я вас правильно понял.
Добавьте к .rating_i vertical-align: middle;

Comments

[evgemiil]

Спасибо) а по качеству верстку оценить можете?

[Андрей Б.]

1. .product_box_basic - зачем там z-index не понятно. z-index работает только когда у элемента задано одно из значений absolute, fixed или relative
2. Название продукта я бы засунул не в P а в h3 или h4
3. .product_price - display: block; указывать не обязательно, т.к. свойство float автоматически делает блок блочным. И разметку я бы сделал по другому. Параграфу для цены тут не место, здесь подойдет span и плюс цену с кнопкой обернуть в общий блок.