Как зафиксировать текст на картинке?

Question

[Minningt]

Подскажите, как можно зафиксировать текст на картинке, если мы изменяем размер экрана? У меня на моем разрешении нормально показывает, а вот на широкоформатном - уже едет блок с текстом.
prntscr.com/84l5yt (первый скрин) - вот примерно так должно смотреться. Хотя текст немного сдвинут и должен быть по середине как тут prntscr.com/84l6fs (второй скрин)
Когда изменяю размер страница на 75%, то блок с текстом уже полностью едет - prntscr.com/84l6o2 (третий скрин)
Как сделать, чтобы этот блок с текстом всегда был на картинке как на втором скриншоте?
jsfiddle.net/w7y66zbp - рабочий вариант

Answer 1

[Stalker_RED]

У вас картинка центрируется .testimage { text-align: center; }
А блок текста прижат вправо .details{ position: absolute; right: 0px; }

Добавил рамку вокруг блока, для наглядности.

Comments

[Minningt]

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

[Stalker_RED]

Выровнял .details влево, text-align: center перенес в .details
jsfiddle.net/w7y66zbp/1
Нужно объяснять почему?

[Minningt]

Stalker_RED: если не трудно, то объясните, пожалуйста.

[Stalker_RED]

Minningt: У вас резиновый блок .testimage
По умолчанию картинка прижимается к левому краю. При text-align: center она выравнивается, внезапно, по центру.
При этом плашку с текстом .details вы почему-то привязали справа.
Блок тянется, картинка едет влево (или в центр) а плашка привязана справа. Вот вам и "всё развалилось".

В подобных случаях, если не получается представить почему всё разъезжается, бывает полезно проставить блокам какой-то цветной фон или обводку (outline). Тогда нагляднее.

[Minningt]

Stalker_RED: спасибо за объяснение и помощь.