Question

我正在尝试设置一个锚点，该锚点会自动拉伸以匹配用作背景的图像的尺寸。此外，锚点的文本需要水平和垂直居中。这是我当前的HTML标记：

<div class="wrap">
    <img src="http://placehold.it/350x150">
    <a href="#">
        <span>Anchor</span>
    </a>
</div>

我的想法是我的.wrap是网格的流体列，因此图像会拉伸以匹配宽度，高度由图像的比率给出。对于垂直对齐网格，锚点显示为table，span在锚点上的background上显示hover * { box-sizing: border-box; } body { height: 100%; } .wrap { height: auto; margin: 2em; overflow: hidden; padding: 1em; position: relative; width: 80%; } .wrap img { width: 100%; } .wrap a { display: table; height: 100%; left: 1em; padding: 1em; position: absolute; text-align: center; top: 1em; width: 100%; } .wrap a span { border: 1px solid red; display: table-cell; vertical-align: middle; } .wrap a:hover span { background: red; }。有我的CSS：

{{1}}

我遇到的问题是锚的高度，它拒绝填充容器。你有一个小提琴：http://jsfiddle.net/xuxG5/3/

我试着在这里查看其他问题但很遗憾没有一个问题符合我的问题 - 它是在流动的父高度中100％高度表的组合，但最常见的答案是设置父级的高度和绝对位置不不要让它变得更简单。

编辑问题以显示主播的文字并不总是只有一行文字

如果有CSS解决方案，我希望你可以帮助我，否则我将使用一个简单的JS脚本。

Answer 1

这应该使A填充框 - http://jsfiddle.net/xuxG5/5/

.wrap a {
    display: block;
    left: 2em;
    right: 2em;
    bottom: 2em;
    top: 2em;
    position: absolute;
    text-align: center;  
    border: 1px solid red;
}

.wrap a span {
    position: absolute;
    top: 50%;
    margin-top: -1em;
    line-height: 2em;
    width: 100%;
    display: block;
}

绝对定位元素的100％高度

1 个答案: