css - 显示图像和文本相互内联

Question

我有这个 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>

它当前显示内联图像和文本，但我有多个图像/文本彼此下方。我怎样才能使所有图像在彼此下方的相同位置对齐？

这是一个 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>

编辑CSS:

.box-inner {
     width:80%;
     margin:0 auto 0 auto;
     text-align:left;
     margin-left:100px;
}