Question

所以我有一些生成的html，我试图设计风格。 html对我来说似乎很正常，我试图应用的CSS很少，但它的行为方式我不会期望。

html会为div添加一个锚标记，其中包含img和div内的一些文字，包含（由于某种原因）span。

＆＃13;

div {
    border: 1px solid black;
    height: 40px;
}


.title img {
    height: 100%    
}

＆＃13;

<div>
    <span class="title ">
        <a href="http://www.google.com">
            <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Commons_app_72_72px.png">   
            <span>Sample Text</span>
        </a>
    </span>
</div>

＆＃13;

如您所见，链接文字位于div的边框之外。

如果我摆脱了图像，文本会正确对齐，但添加img似乎会延伸包含在其所包含的div边界之外的范围，尽管事实是img不大于div，并且不会延伸到span的新大小。它几乎看起来锚中的img和span没有对齐，而span正在拉伸以允许它们奇怪地偏移。

div和span与类title的奇怪嵌套不是我可以控制的，所以如果我的问题的解决方案需要更改，请解释原因。< / p>

如何摆脱这种奇怪的行为？

Answer 1

只需为图片添加 vertical-align：middle ：

.title img {
    height: 100%;
    vertical-align: middle;
}

如果您想通过顶部边界对齐文本而不是将vertical-align设置为顶部。

图像是内联元素。默认情况下，字符串与基线对齐。由于图像大于文本行高，因此文本与下边界对齐。

Answer 2

默认情况下，图片是内联元素，descenders下方提供了空间。

解决此问题的一种方法是使用vertical-align。

所以而不是：

.title img {
    height: 100%;    
}

尝试：

.title img {
    height: 100%;
    vertical-align: bottom;   
}

DEMO

在此处了解有关下降器的更多信息：

跨越img里面的div溢出div边界

2 个答案: