如何垂直对齐图像和文本

时间:2013-09-26 23:25:48

标签: html css

我对垂直对齐问题有疑问

我昨天问了一个问题

How to vertical align my images and texts

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

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

我的jsfiddle

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

任何人都可以帮我吗?谢谢!

2 个答案:

答案 0 :(得分: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:我用你的形象)

答案 1 :(得分: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-block使用.title,您将获得更好的结果,否则,将会针对.title块的第二行进行对齐。

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