tef

Всё дело в высоте строки (line-height). Строчные элементы равняются по строке. Если выставить высоту строки равной величине родительского элемента в котором нужно отцентровать, то будет желаемый эффект.

это делается за день и меньше

Ну-ну...

Вообще мне, конечно, показывали как на WP с плагином каким-то можно накликать себе лендинг за пару часов. Но так-то можно и в Muse сразу мутить и тогда верстальщик вообще не нужен.

Смотря какой разброс по размерам. Если сильно большой то имеет смысл переконвертировать их на сервере.

А так, картинку вставляете фоном и задаёте позиционирование по центру. Примерно так.

img {
bacground-image: url(картинка.png);
background-position: 50%;
}

Есть ещё bacground-size: cover. Он растягивает фоновую картинку по ширине и высоте блока.

Забей, это херня никогда не работала нормально. Просто возьми другой, тонкий шрифт.

Немного не то, что вам нужно, но тема смежная (язык английский) www.youtube.com/watch?v=s4HdeJctq-A

nth-child(2)

Что если это будет не линия, а тонкий, изогнутый прямоугольник?

htmlbook.ru/css/columns

white-space: nowrap;
либо
display: inline-block;

и кнопка прыгнет вниз.

Шрифт, конечно вырвиглазный. Гуглите "прибить футер". Есть несколько способов. Тут на пальцах не объяснить.

Тут, как уже сказали, комплексное решение нужно.
Но есть такие величины измерения в CSS как vw и vh. Это размер вьюпорта. Погуглите. Возможно это поможет в решении вашего вопроса.

Как-то так?

jsfiddle.net/v3ytu53L/1

www.cssauthor.com/website-templates

У tutsplus есть скринкасты. Но опять же на английском. Но по контексту будет, я думаю понятно, что к чему.