图像堆叠在一起而不是内联

Question

我已经好几天了。在我的网站中，图像堆叠在一起，因此它看起来是单个图像而不是4.此外，它显示在页面上的其他元素之上，就像文本一样。在Dreamweaver中，它显示了我想要的方式，但在浏览器中，它显示如上所述。

我想要的是：四个图像并排显示在页面标题上方关于我们。 这是代码：

<center>
<span class="images">
<img src="images/aboutUs/longJumpBoy.jpg" alt="longJumpBoy" longdesc="images/aboutUs/longJumpBoy.jpg">
<img src="images/aboutUs/groupPic.jpg" alt="groupPic" width="214" longdesc="images/aboutUs/groupPic.jpg">
<img src="images/aboutUs/kidOnTrack.jpg" alt="kidOnTrack" longdesc="images/aboutUs/kidOnTrack.jpg">
<img src="images/aboutUs/throwingKids.jpg" alt="throwingKids" longdesc="images/aboutUs/throwingKids.jpg">

 </span> 

</center>

    <h1>About Us</h1>        
<br /><br />
    <h2>Who are we?</h2> 
<p>
    The team is a USA Track and Field (USATF) certified running club. We compete locally and nationally. Our athletes are able to train in all disciplines in track and field, but the team is specialized in distance running. Our runners are registered to run in both USATF and Amateur Athletic Union (AAU) league events.
    <br />
    Practices are held primarily on El Paso's East side.
</p>
 <header>
    <h2>Mission Statement</h2>
</header>

这是CSS

.images img {
    display:inline-block;
    border-color: rgb(191,224,104);
    border-width: 3px;
    margin: auto
}

编辑：我编辑了代码，这里是我的jsFiddle的链接：http://jsfiddle.net/JaLb7/。现在，浏览器中的图像显示在文本上方，但只显示其中一个。此外，当我滚动时，图像不会随页面滚动，而是文本在图像后面滚动。

我的问题图片：

Answer 1

您可以使用display，text-align和white-space：

您的HTML

<span class="images">
<img src="images/aboutUs/longJumpBoy.jpg" alt="longJumpBoy" longdesc="images/aboutUs/longJumpBoy.jpg">
<img src="images/aboutUs/groupPic.jpg" alt="groupPic" width="214" longdesc="images/aboutUs/groupPic.jpg">
<img src="images/aboutUs/kidOnTrack.jpg" alt="kidOnTrack" longdesc="images/aboutUs/kidOnTrack.jpg">
<img src="images/aboutUs/throwingKids.jpg" alt="throwingKids" longdesc="images/aboutUs/throwingKids.jpg">
 </span> 

应用基础CSS

.images {
display:block;
text-align:center;
white-space:nowrap;
}

注意，如果准确的话，应该是<p>或<div>或<figure>等块元素。

一旦您知道如何应用<center>和/或margin:auto;，就不应该使用

text-align:center;并且完全没用。

Answer 2

好的，所以这是一个业余的错误。在挖掘完样式表之后，我看到我对样式（不是类的一部分）有一个img标签定义 - 它有一个固定的定位。我们现在看起来好多了。

感谢您的所有帮助和建议，我根据您的建议清理了我的代码 - 这在其他方面有所帮助。