在div内的跨度内对齐图像和文本

Question

我试图让这项工作变得疯狂，这是我想要完成的结果：

    <div style="float: left;width:400px;border:1px;">
        <span><img src="" style="width: 60px;height: 60px;" /><br />SQL Server 2005</span>
        <span><img src="" style="width: 60px;height: 60px;" /><br />SQL Server 2008</span>
        <span><img src="" style="width: 60px;height: 60px;" /><br />Ruby on Rails</span>
    </div>

只是想不通，怎么会有猜测？

Answer 1

这应该做你想要的：

<div style="width:400px;border:1px;">
   <div style="width:120px; float:left; text-align:center;">
        <img src="" style="width: 60px;height: 60px;" />
        <br/>
        <span>SQL Server 2005</span>
    </div>
    <div style="width: 120px; float:left; text-align:center;">
        <img src="" style="width: 60px;height: 60px;" />
        <br/>
        <span>SQL Server 2008</span>
    </div>
    <div style="width: 120px; float:left; text-align:center;">
        <img src="" style="width: 60px;height: 60px;" />
        <br/>
        <span>Ruby on Rails</span>
    </div>
</div>

Answer 2

HTML：

<div id="row">
    <span><img src="" /><br />SQL Server 2005</span>
    <span><img src="" /><br />SQL Server 2008</span>
    <span><img src="" /><br />Ruby on Rails</span>
</div>

CSS：

div#row {
  overflow: hidden; /*This is a clearfix because all it's children are floated*/
  width: 400px;
  border: 1px solid #000000;
}

div#row span {
  display: block;
  float: left;
  width: 60px;
  margin: 0 36px;
}

div#row span img {
  display: block;
  width: 58px;
  height: 58px;
  border: 1px solid #000000;
}

Answer 3

将剩下的所有跨度浮动，此时它们都在彼此之下。