Выравнивание пустого Div и изображений

Question

Я работаю над сообщением, чтобы ознакомиться с японской Hiagana. Тем не менее, я собираюсь использовать намного больше изображений, а затем звук. Чтобы использовать меньшее количество изображений, я попытался заменить пустой .pngs на div, но я не могу выровнять его с остальными изображениями. Я уверен, что в моем коде есть что-то не так, но я действительно не знаю, как это исправить, или если есть альтернатива тому, что я делаю. Любая помощь будет оценена!

Это страница: http://template00test.blogspot.com/2015/03/blog-post.html

<style> 
.container { 
position: relative; 
width: 645px; 
margin: 0 auto; 
text-align:center; 
} 

.miniature { 
    width: 6%; 
    border: 1px solid grey; 
    margin: 5px; 
} 

.miniaturex { 
    height: 42px; 
    width: 6%; 
    border: 1px solid red; 
    margin: 5px; 
} 

</style> 

miniaturex является красный квадрат в ссылке выше, и это один я хотел бы, чтобы выровнять с остальными, если это возможно.

Это пример того, что у меня есть:

<div class="container"> 

<img class="miniature" src="https://lh5.googleusercontent.com/-rMwJbjg8x6I/VRdR9hUt5nI/AAAAAAAACJg/6gs2p1iOtm8/w60-h65-no/ha.png" /> 

<img class="miniature" src="https://lh5.googleusercontent.com/-EyXbRIMgfVI/VRdSBv9N-HI/AAAAAAAACJM/4QC48pQlpvo/w60-h65-no/na.png" /> 

<img class="miniature" src="https://lh5.googleusercontent.com/-vz3-ygDqmb0/VRdSFV5Qx4I/AAAAAAAACH0/td8fZFhbqsY/w60-h65-no/ta.png" /> 

<img class="miniature" src="https://lh5.googleusercontent.com/-ptiyMClrHPY/VRdSD0q7PxI/AAAAAAAACHU/HG8bUV5D6yQ/w60-h65-no/sa.png" /> 

<img class="miniature" src="https://lh5.googleusercontent.com/-RIuFcb3hvoE/VRdR-br6qFI/AAAAAAAACE4/7y1pcIHMuWU/w60-h65-no/ka.png" /> 

<img class="miniature" src="https://lh3.googleusercontent.com/-5hjR44OOz5c/VRdR9QG_maI/AAAAAAAACJg/FI8wRCLD1iI/w60-h65-no/a.png" /> 

<img class="miniature" src="https://lh3.googleusercontent.com/-TWp0rlJ4zXw/VRioHhaQw_I/AAAAAAAACJ8/AUWtqm8hpcU/w60-h65-no/x.png" /> 

</div> 

<div class="miniaturex"></div> 

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

Answer 1

Контейнер div делает центр выравнивания текста, а также содержит ваши изображения до 645 пикселей. Миниатюрный div сидит за пределами контейнера, поэтому он не связан этими стилями.

Просто перемещайте миниатюры внутри контейнера или, наоборот, дублируйте контейнер div, чтобы удерживать div. Для ясности вы могли бы также объединить общие настройки на миниатюре и миниатюре, затем иметь отдельные объявления CSS для своих конкретных уникальных атрибутов (например, высота на миниатюре).

Answer 2

Я бы вынул текст из контейнера. Вы также можете сделать что-то вроде img .class Чем это называется <img class="" />, вы можете сделать это, чтобы сгруппировать определенные изображения в контейнере.

<table> 

<tr>

<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
</tr> 
<tr> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
</tr> 
<tr> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
<td><img src="ra.png" /> 
</tr> 
</table>