html - 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

残りのすべてのスパンをフロートさせます。現時点では、それらはすべて互いに下にあります。