html - 如何垂直对齐图像和文本

Question

我有一个关于垂直对齐问题的问题

我昨天问了一个问题

How to vertical align my images and texts

但我已经更改了代码和文本。 span 内的文本有 2 行文本，我不确定如何垂直对齐图像和文本的中间。

我已经在大部分元素上将 vertical-align 设置为 middle 但仍然不起作用

我的 jsfiddle

http://jsfiddle.net/wjPxS/4/

谁能帮我解决这个问题？谢谢!

Answer 1

这是一种方法。

对于这个 HTML:

<div class='div1'>
    <span class='title'> this is the text<br>this is the second text</span>
    <a class='link' href='#'>
        <img class='img' src='http://placehold.it/100x50'/>
    </a>
</div>

试试下面的 CSS:

.div1 {
    border-color: black;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    padding: 10px;
    font-size: .8em;
    height: auto;
}
.title {
    width: 200px;
    height: auto;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid blue;
}
.img {
    vertical-align: middle;
}

如果你对.title使用display: inline-block，你会得到更好的结果，否则，对齐将相对于第二行.title block 。

参见演示:http://jsfiddle.net/audetwebdesign/mqwzU/