Align Image and text inside a span inside a div

Question

I'm getting crazy trying to make this work out, this is the result Im trying to accomplish:

enter image description here

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

just can't figure how, anybody would have a guess?

score 2 · Accepted Answer · answered Oct 05 '12 at 02:34

2

This should do what you want:

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

answered Oct 05 '12 at 02:34

Falkenfighter

568
6
16

I will mark it as answered, but why I'm not suppose to add the float:left on the div? – RollRoll Oct 05 '12 at 02:38
Html places elements one on top of another. The way you had it set up, you were floating the container with 3 objects inside. Thus you ended up with 3 objects one on top each other, inside of a floated container. Had you added another div element outside your initial div, it would have shown up next to the first as you wanted. You just needed to break each element apart and float them. – Falkenfighter Oct 05 '12 at 02:48

score 1 · Answer 2 · answered Oct 05 '12 at 02:19

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;
}

score 0 · Answer 3 · answered Oct 05 '12 at 02:18

0

Float all the spans left, at the moment they are all under each other.

answered Oct 05 '12 at 02:18

UniAvenger

232
2
11

Align Image and text inside a span inside a div

3 Answers3