Question

我希望将所有文字和图片垂直对齐。我该怎么做呢？所以基本上Hello出现在每个图像的中间。第一张图像垂直居中。

＆＃13;

div {
    width:75px;
    height:100px;
    float:left;
    background:#eee
}

＆＃13;

<div><img src="http://placehold.it/25x25"> Hello</div>
    
<div><img src="http://placehold.it/25x100"> Hello</div>

＆＃13;

http://jsfiddle.net/ueqba2zf/

Answer 1

我现在已经做了一段时间的HTML了，但这样的事情应该有效：

<div style="display=block;float:left"><img src="http://placehold.it/25x25" style="height=80px"> <p style:"text-align: center;;width 75px;">Hello</p></div>

你可以看看这个：

http://www.w3schools.com/css/css_text.asp

Answer 2

这是一个想法，虽然它不是最好的。除非您有合理的方法来预测图像大小，否则它可能不实用。但是，我认为如果没有这些知识或对象周围的一致包装，这是不可能的。

HTML

<div class="img-wrap">
    <img class="small-img" src="http://placehold.it/25x25" />
    <span class="text">Hello</span>
</div>
<div class="img-wrap">
    <img class="large-img" src="http://placehold.it/25x100" />
    <span class="text">Hello</span>
</div>

CSS

.img-wrap img {
    float: left;
}
.img-wrap img + .text {
    display: inline-block;
    float: left;
    height: 1em;
    margin-top: -.5em;
    white-space: nowrap;
}
.small-img + .text {
    transform: translateY(12.5px);
}
.large-img + .text {
    transform: translateY(50px);
}

更新了fiddle

基本上我所做的只是将文本2限制为一行，以便其高度可预测，然后将其翻译为相对于前一图像的高度居中。

如果您想要多行文本，可以执行以下操作：

HTML

<div class="box small-box">
    <img class="small-img" src="http://placehold.it/25x25" />
    <span class="text">Hello There</span>
</div>
<div class="box large-box">
    <img class="large-img" src="http://placehold.it/25x100" />
    <span class="text">Hello There</span>
</div>

CSS

.box {
    float: left;
    position: relative;
}
.small-box {
    height: 25px;
}
.large-box {
    height: 100px;
}
.box img + .text {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    height: 2.2em;
    line-height: 1.1;
    margin: auto 0;
    overflow: hidden;
}
.box .small-img + .text {
    left: 25px;
    transform: none;
}
.box .large-img + .text {
    left: 25px;
    transform: none;
}

这里我实际上使用具有自动边距的绝对位置来使文本居中。您需要正确调整包装器的大小并限制可见文本的数量，但也不错。另外，考虑使用jQuery省略号等工具来处理文本溢出。

使用CSS将图像旁边的文本垂直对齐

2 个答案: