在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

浮動所有的跨度，此時它們都在彼此之下。