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

您的HTML无效，id属性应该是唯一的，并且您有<div>个元素id="text"。要得到你想要的东西，你必须：（jsFiddle）

将所有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>

调整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;

}

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

显示图像彼此内联的文本

3 个答案: