[Решено] Выровнять несколько элементов поверх изображения - Вопросы по CSS

Все началось с того "Как написать текст поверх изображения".
Проблемная страница: http://crimson-land.ru/games/top-down.html
С помощью этой статьи http://www.css-tricks.ru/articles/Details/TextBlocksOverImage
привел категорию к желаемому виду - поверх изображения отображается текст "скачать" с красным фоном.


Все замечательно до тех пор, пока не понадобилось добавить второй текст. Видно как один текст "Demo" накладывается на другой "Steam" (ну вроде логично, ведь для второго применен аналогичный стиль, но с другим фоном):



В попытках отобразить оба текста в одну строку рядом друг с другом, отредактировал CSS до следующего вида, изменив атрибут "position" и добавив "display: inline;":

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



Далее так и не понял, в чем моя ошибка и в чем секрет "position".
На данный момент в CSS использованы стили, которые указаны в начале топика.
Благодарю за помощь.

Пробовали сделать блок с картинкой не img, а div с бакграундом этой картинки? тогда вопрос с position отпадет, так как кнопки можно поместить внутрь этого блока и уже спозиционировать как надо.
Второй вариант - тоже без position. Кнопки будут relative со сдвигом на картинку наверх top:-40px, например.
Третий вариант - js скрипт, где позиция кнопок будет зависеть от их ширины.
Четвертый - если текст на кнопках будет не динамичный, то почему бы и не выровнять с помощью margin?

Посмотрел по ссылке - проблем не увидел

Пробовали сделать блок с картинкой не img, а div с бакграундом этой картинки? тогда вопрос с position отпадет, так как кнопки можно поместить внутрь этого блока и уже спозиционировать как надо.

К сожалению данный вариант не подходит т.к. изображение должно быть кликабельным (оно создается не com_content компонентом и глобально менять в нем вывод изображений не желателен).

Второй вариант - тоже без position. Кнопки будут relative со сдвигом на картинку наверх top:-40px, например.

Да, так работает (как писал ниже) Но появляется отступ

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

Не подходит.

Четвертый - если текст на кнопках будет не динамичный, то почему бы и не выровнять с помощью margin?

К сожалению где-то одна кнопка, а где-то две-три и хочется, чтобы всегда они были по центру.

Спасибо.

Добавилось несколько статей к категории, но результат можно увидеть, если пощелкать по поганиции 1, 2, 3... http://crimson-land.ru/games/top-down.html
Возникает проблема в отступах

С помощью мазонри выкрутились, как посмотрю)
что если кнопки поместить в отдельный div , у которого будет position: absolute, сам div будет поверх изображения, а кнопки внутри него display:inline-block?

Спасибо большое - сработало :~]

Незачто.
Мазонри вырубить не забудь)

MacOS
Safari 6 - нет проблем
Firefox 23 - нет проблем
Chrome 30 - нет проблем

Причем в Chrome было, но при обновлении страницы исчезло .... видимо вы исправили