0

I'm trying to set up an anchor that would automatically stretch to match the dimensions of an image that is used as a background. Also, the anchor's text needs to be both horizontally and vertically centered. Here's my current HTML markup:

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

The idea is that my .wrap is a fluid column of a grid, so the image stretches to match the width and height is given by the image's ratio. The anchor is displayed as a table for vertical alignmenet and the span has a background visible on hover over the anchor. There is my CSS:

* {
    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;    
}

The problem I have is the height of the anchor, it refuses to fill the container. Here you have a fiddle: http://jsfiddle.net/xuxG5/3/

I tried looking into other questions around here but unfortunately none of them matched my problem - it's a combination of 100% height table in a fluid parent height but the most common answer was to set height of the parent and the absolute position doesn't make it any simpler.

Question edited to show the anchor's text doesn't always have just one line of text

I was hoping you could help me if there is a CSS solution, otherwise I will use a simple JS script.

Jakub Kotrs
  • 5,823
  • 1
  • 14
  • 30
  • Like this http://jsfiddle.net/j08691/xuxG5/2/? – j08691 Mar 22 '14 at 16:22
  • That could be a way to go, but padding doesn't really mean centering, I'll update my question to show, that the text can be multiple lines and not always the same number of them. – Jakub Kotrs Mar 22 '14 at 16:24

1 Answers1

1

This should make the A fill the box - 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;
}
David
  • 4,313
  • 1
  • 21
  • 29
  • Yes, it does indeed, but how to vertically center the contents now? – Jakub Kotrs Mar 22 '14 at 16:20
  • _"Also, the anchor's text needs to be both horizontally **and vertically centered**"_ – j08691 Mar 22 '14 at 16:21
  • Vertical aligning generally requires hackish unreliable techniques unless you use JS – Kiee Mar 22 '14 at 16:23
  • Updated to center the text. Thanks for alerting me. – David Mar 22 '14 at 16:31
  • Well, looks like I'll have to use Javascript to calculate the height in pixels despite your best efforts and helpfulness. The desired efect seems to be too complex for CSS as your solution centers the content only with one line of text, see: http://jsfiddle.net/xuxG5/6/ – Jakub Kotrs Mar 22 '14 at 16:37