SamohtVII Posted January 30, 2015 Share Posted January 30, 2015 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 30, 2015 Share Posted January 30, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
SamohtVII Posted January 31, 2015 Author Share Posted January 31, 2015 Thanks. That's very close but the text goes over 2 lines so now it is very spaced out. Any ideas? Link to comment Share on other sites More sharing options...
Ingolme Posted January 31, 2015 Share Posted January 31, 2015 Instead of line-height use padding for the vertical space. Link to comment Share on other sites More sharing options...
tejasamrute Posted January 31, 2015 Share Posted January 31, 2015 .subBubble a{ display:block; width:100%; height:100%; padding-top:20px; /*As Desired*/ } Link to comment Share on other sites More sharing options...
SamohtVII Posted January 31, 2015 Author Share Posted January 31, 2015 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 31, 2015 Share Posted January 31, 2015 (edited) 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 1 Link to comment Share on other sites More sharing options...
SamohtVII Posted February 1, 2015 Author Share Posted February 1, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now