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>

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

这是一个小提琴：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;
}

Answer 2

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

}

像这样的东西？但是你必须用类替换你的id。

Answer 3

您的 HTML 无效，id属性是唯一的，并且您有一些<div>带有id="text". 要得到你想要的，你必须：（jsFiddle）

1. 全部替换id="text"为class="text"并添加<div class="caption">以包装每个标题：

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

2. 调整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;
    }