Выравнивание CSS не работает

Question

Для жизни меня я не могу решить эту проблему. Надеюсь, это будет легко для одного из вас удивительных людей.

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

http://saviourssalon.com/test/063/

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

Последний раз, когда я задал здесь вопрос, люди упомянули об использовании Firebug. Я использовал эквивалентный инструмент в Safari, но на самом деле это не помогло.

Вот наиболее важная часть CSS:

img { 
    max-width: 100%; 
    padding-top: 0px; 
    padding-bottom: auto; 
} 

#hero_wrapper { 
    max-width: 100%; 
    position: relative; 
} 

box { 
    text-align: center; 
    max-width: 466px; 
} 

Вот соответствующий HTML:

<div id="contact_wrapper"> 
    <box> 
    <div> 
     <img src="images/big_type_v2_011_06.jpg"> 
     <img src="images/big_type_v2_011_08.jpg"> 
    </div> 
    </box> 
    <box> 
    <div> 
     <img src="images/big_type_v2_011_12.jpg"> 
     <img src="images/big_type_v2_011_13.jpg"> 
    </div> 
    </box>   
</div> 

Полный CSS является here.

Answer 1

Вы можете попробовать добавить в vertical-align свойства следующего правило CSS:

img { 
    max-width: 100%; 
    padding-top: 0px; 
    vertical-align: top; 
    display: inline-block; 
    margin: 30px; 
} 

Вы можете получить более эффективный контроль расстояния изображения, если вы используете display: inline-block на изображениях таким образом верхние/нижние поля будут иметь желаемый эффект ,

В иллюстративных целях: