Почему не удается спозиционировать адаптивный блок по центру внизу контейнера?

Question

[ligisayan]

Есть у меня адаптивный блок с шириной в зависимости от надписи. Как его расположить точнехонько внизу по центру блока breadcrumbs, чтобы он оставался все время адаптивным. С помощью марджинов мне удалось расположить так, как того хочу, но заметна разница в 1px между браузерами хромом и сафари (пробовал и пиксели и em). Кажется что такое 1px, но на сайте это сразу бросается в глаза. Как можно это поправить? Смотрю в сторону абсолютного позиционирования, но тогда получается беда с адаптивностью.. Набросал фидл. (еще какой-то зазор возник в отличие от оригинала)

Comments

[Lynn «Кофеман»]

Кто-то будет разглядывать ваш сайт одновременно в хроме и сафари и искать разницу?

[Lynn «Кофеман»]

Разница в один пиксель всегда может быть из-за разных правил округления, разной ширины окна и т.п.

[ligisayan]

Алексей Тен: да, кто-то будет - в первую очередь заказчик. в сафари это сразу бросается в глаза

[Lynn «Кофеман»]

Ну так покажите скришнот хотя бы, что ли.

А вообще, вам стоит матчасть подучить. Если вас в тупик ставит зазор от пробела в вашем фидле…

[ligisayan]

Алексей Тен ну а песочница для чего я привел в описании? какой скриншот нужен?
"Если вас в тупик ставит зазор от пробела в вашем фидле…" ну, не знал я, что каждый браузер по умолчанию добавляет у инлайн-блочных элементов отступ, который паддингами и марждинами не управляется - и что в этом такого? покажите мне хотя бы одного человека, который бы в разработке, да хотя бы верстке знал бы абсолютно все нюансы и баги, которые могут встречаться во всех браузерах

[Lynn «Кофеман»]

ligisayan: нет, ты до сих пор не знаешь что такое inline-block.

[ligisayan]

Алексей Тен знаю-не знаю - вам какая разница? и что это вы уже тыкать стали - пусть бы лучше по делу, что-нить написали

[Lynn «Кофеман»]

ligisayan: по делу я написал первые два комментария. В приведённом примере никто никогда не заметит разницу в один пиксель.

[Lynn «Кофеман»]

Ну и в приведённом примере я не вижу что бы что-то было «в самом низу»

Answer 1

[ligisayan]

Все же добился я правильного ответа на свой вопрос
Спасибо за помощь!

.trail-end-wrapper {
    display: table-cell;
    min-width: 276px;
    height: 48px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
}

Answer 2

[Саша]

Из-за чего могут быть зазоры
https://toster.ru/answer?answer_id=673057#answers_...

По остальному не ясно, покажите дизайн.

Comments

[ligisayan]

Саша да, спасибо, хоть я уже с этим чуть раньше тоже разобрался. Саша так есть же песочница - куда уже нагляднее демонстрация? задача: расположить блок в самом низу по центру при любых разрешениях и при любой длине теста в блоке

[Саша]

ligisayan: попробуйте с помощью флексбокса, если не получиться пишите, помогу.

[ligisayan]

Саша флексбокс, к сожалению, не кроссбраузерный, а мне нужна как минимум поддержка ie9, ато и 8

[Саша]

ligisayan: В таком случае пробуйте на табличных свойствах или абсолютным позиционированием.

[ligisayan]

Саша что имеете ввиду под табличными свойствами? с абсолютным позиционированием проблемы возникают на средних и малых разрешениях: надпись у нас может изменяться, в т.ч. и на более длинную "блок с шириной в зависимости от надписи."

[Саша]

ligisayan: например реализация "футер всегда внизу".
В роли футера выступает ваш блок

[ligisayan]

Саша аа, понял спасибо, но лучше так

[Саша]

ligisayan: так?)

[ligisayan]

Саша

position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);

[Саша]

ligisayan: гуд)