Question

我对垂直对齐问题有疑问

我昨天问了一个问题

How to vertical align my images and texts

但我更改了代码和文字。 span内的文本有2行文本，我不知道如何垂直对齐图像和文本的中间位置。

我已在大部分元素上设置vertical-align到middle但仍无法正常工作

我的jsfiddle

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

任何人都可以帮我吗？谢谢！

Answer 1

我写了一篇Fiddle来演示如何垂直对齐所有内容。它也适用于2行文本，以及您想要的所有内容。

<强> HTML：

<div class="Container">
    <div class="Content">
        I'm the Content
    </div>
</div>

<强> CSS：

    .Container:before
    {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Content
{
    display: inline-block;
    vertical-align: middle;
}

你的小提琴

以下是针对您的情况的更新Fiddle。（@Marc Audet：我用你的形象）

Answer 2

这是一种方法。

对于 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;
}

如果您对display: inline-block使用.title，您将获得更好的结果，否则，将会针对.title块的第二行进行对齐。

请参阅演示：http://jsfiddle.net/audetwebdesign/mqwzU/

如何垂直对齐图像和文本

2 个答案:

你的小提琴