a tag entire height/width of parent div

[SamohtVII]

Here's a tricky one.

 

I have a div (80x80) and inside the div is an anchor tag. I want the clickable area for the anchor tag to be the entire width and height of the parent div.

Along with that I would like the text center aligned and center justified.

 

The closest I have is display:block that aligns the text top and then I can get the text centered vertically but not horizontally. Can anyone help.

 

I can't do any workarounds this must be done in CSS. Thanks

<div class="subBubble">      <a class='node' href='node/89'>Imaging</a>                     </div>   

Thanks

[dsonesuk]

The usual method woluld be.node {display: block; /* fills available width*/ text-align: center; /* centre text horizontally */ line-height: 80px; /*fills entire height and vertically aligns text in middle*/}

Edited January 30, 2015 by dsonesuk

[SamohtVII]

Thanks. That's very close but the text goes over 2 lines so now it is very spaced out. Any ideas?

[Ingolme]

Instead of line-height use padding for the vertical space.

[tejasamrute]

.subBubble a{    display:block;    width:100%;    height:100%;    padding-top:20px; /*As Desired*/    }

[SamohtVII]

The problem with that is some of the nodes have multiple words and some have just one word so I was hoping for something that can vertical and horizontal align so it's consistantly spaced.

[dsonesuk]

try

            .subBubble {width: 80px;                  height: 80px; display: table;}            .subBubble a{display: table-cell; vertical-align: middle; text-align: center; /*almost forgot horz alignment*/}

Edited January 31, 2015 by dsonesuk

[SamohtVII]

 

try

            .subBubble {width: 80px;                  height: 80px; display: table;}            .subBubble a{display: table-cell; vertical-align: middle; text-align: center; /*almost forgot horz alignment*/}

We have a winner! Thanks heaps everyone. Works perfect.