如何将标题h2中的图像链接垂直对齐到底部?

时间:2013-07-17 14:29:32

标签: html css image vertical-alignment

目前我只想要一个h2中的图像链接。

此链接应位于底部。

这就是我所拥有的:

<html>
    <head>
        <style>
            body {
                margin: 0;
            }
            h2 {
                margin: 5px 0 10px;
                background: #333333;
                color: #f7f7f7;
                line-height: 142%;
            }
            h2 a {
                float: right;
            }
            h2 img {
                vertical-align: bottom;
            }
            h2:after {
                content:"";
                height: 1px;
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <h2>Header <a href="#"><img src="http://placehold.it/26x26" /></a></h2>
    </body>
</html>

但奇怪的是,当我将此代码包含在.html文件中时。我有<a>标签,高度为26px。

当我创建一个jsfiddle时,<a>标签是34px并且对齐底部?!?!

HTML file

jsfiddle result

那么,我的错误是什么?我只想让图像在底部对齐......

1 个答案:

答案 0 :(得分:1)

在html标记之前添加doctype:

  

<!DOCTYPE html>