1

我对垂直对齐问题有疑问

我昨天问了一个问题

如何垂直对齐我的图像和文本

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

我已经设置vertical-align了middle大部分元素，但仍然无法正常工作

我的 jsfiddle

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

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

4

2 回答 2

0

我写了一个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：我用了你的图片）

于 2013-09-26T23:45:14.060 回答
0

这是一种方法。

对于这个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-blockfor .title，你会得到更好的结果，否则，对齐将相对于.title块的第二行进行。

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

于 2013-09-26T23:57:38.237 回答