display image a text inline with each other - css

Question

i have this CSS:
<style type="text/css">
#box {
width:100%;
height:80px;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
#text, #text a {
font-size:16px;
color:#F36F25;
margin:10px;
}
#text:hover, #text a:hover {
color:#666666;
text-decoration:none;
}
#text img {
vertical-align: middle;
margin-right:20px;
}
</style>
its currently displaying the image and text inline but i have multiple images/text below each other. how can i make all the images align in the same position below each other?
here is a fiddle: http://jsfiddle.net/8dsTu/

Answer 1

http://jsfiddle.net/8dsTu/4/
<div id="text">
<img src="../images/icons/address.png" height="60" />
<div style="display:inline-block;">
Address 1,<br />
Address 2,<br />
County Post Code
</div>
</div>
Edit css:
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:left;
margin-left:100px;
}

Answer 2

Your HTML is invalid, id property is meant to be unique and you have a few <div> elements with id="text". To get what you want you'll have to: (jsFiddle)
replace all id="text" with class="text" and add <div class="caption"> to wrap each of the captions:
<div id="box">
<div class="box-inner">
<div class="text">
<img src="../images/icons/telephone.png" height="60" />
<div class="caption">00000 00 00 00</div>
</div>
<div class="text">
<img src="../images/icons/email.png" height="60" />
<div class="caption">sales#domain.co.uk</div>
</div>
<div class="text">
<img src="../images/icons/address.png" height="60" />
<div class="caption">Address 1,<br />Address 2,<br />County Post Code</div>
</div>
</div>
</div>
Adjust the css:
#box {
width:100%;
height:80px;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
.text, .text a {
font-size:16px;
color:#F36F25;
margin:10px;
}
.text:hover, .text a:hover {
color:#666666;
text-decoration:none;
}
.text img {
vertical-align: middle;
margin-right:20px;
}
.caption{ /* This is the new bit - display:inline-block does the trick. adjust margin-top to your needs */
display:inline-block;
vertical-align:top;
margin-top:15px;
}

Answer 3

#box {
width:100%;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
.text, .text a {
font-size:16px;
color:#F36F25;
}
.text:hover, .text a:hover {
color:#666666;
text-decoration:none;
}
.text img {
vertical-align: middle;
margin-right:20px;
width: 60px;
background: black;
float: left;
}
.text {
overflow: hidden;
width: 250px;
margin: 10px auto;
}
Something like this? But you must replace your id's with classes.