对齐一个空的Div和图像

Question

我正在开发一篇文章，以便熟悉日本Hiagana。但是，我将使用更多的图像，并且稍后会有声音。为了使用更少的图像，我尝试用div替换空的.png，但我无法将其与其余图像对齐。我很确定我的代码有问题，但我真的不知道如何解决它，或者如果有我替代的方法。任何帮助将不胜感激！

这是网页：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

Container div正在做一个文本对齐中心以及包含您的图像到645像素。 minaturex div位于容器外，因此不受这些款式的限制。

只需在容器中移动miniaturex，或者复制容器div以容纳div。为了清楚起见，您还可以结合使用微缩和微缩的常用设置，然后为其特定的独特属性（例如minaturex上的高度）分别声明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>