CSS/HTML Выравнивание изображений в сетке на странице wordpress

Question

Я использую сетку 2x2 на странице wordpress для отображения некоторых изображений, которые изменяются во время мыши.

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

я ставлю этот код в моем CSS стилей

.grid { 
    width: 704px; 
    margin: auto; 
    vertical-align: middle; 
} 
.grid-m1 { 
    float: left; 
    width: 22px; 
    height: 1px; 
} 
.grid-c1 { 
    float: left; 
    width: 320px; 
} 
.grid-m2 { 
    float: left; 
    width: 22px; 
    height: 1px; 
} 
.grid-c2 { 
    float: left; 
    width: 320px; 
} 

Тогда в моей новой странице я помещал в:

<div class="grid"> 
    <p class="grid-m1"></p> 
    <p class="grid-c1"><a id="top left" href="top left"> 
<img title="Top Left" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left.png" /> 
</a> 
    </p> 
    <p class="grid-m2"></p> 
    <p class="grid-c2"><a id="top right" href="top right"> 
<img title="Top Right" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right.png" /> 
</a> 
    </p> 
</div> 
<div class="grid"> 
    <p class="grid-m1"></p> 
    <p class="grid-c1"><a id="bottom left" href="bottom left"> 
<img title="Bottom Left" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right.png" /> 
</a> 
    </p> 
    <p class="grid-m2"></p> 
    <p class="grid-c2"> 
     <img src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/focus-group.png" /> 
    </p> 
</div> 

http://jsfiddle.net/isherwood/DZqQJ/

Как вы можете видеть, глядя на моем сайте: quickfoqus.com/studies/test Я не могу заставить эти 4 изображения правильно выстраиваться в сетке.

Я пробовал метки с вертикальным выравниванием на моем css, но это, похоже, не работало.

Спасибо за помощь!

Answer 1

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

http://jsfiddle.net/isherwood/DZqQJ/1/

<img src="http://.../focus-group.png" style="margin: 10px 0 0 15px;" />