wigginsda Posted March 26, 2014 Share Posted March 26, 2014 I'm having an issue lining up link text and my image "button". The text length exceeds the with of the image. I can't seem to get the text to appear centered below the image either. Final goal= I don't want the image to change unless the cursor is directly over the image or the link text. HTML<div class="Leaf"><a href="" alt="Naturopathy" title="Naturopathy"><img src="a.png"></img>Naturopathy</a></div>CSSdiv.Leaf { text-align: center; margin: 0 6px 12px; width: 72px; height: 72px; border-style: none; background-image:url("b.png"); background-repeat: no-repeat;} div.Leaf a, div.Leaf a:link, div.Leaf a:visited { display:block; border-style: none;} div.Leaf img { width:72px; height:72px; border-style: none;} div.Leaf a:hover img { visibility:hidden;} Thank you for your time, David Link to comment Share on other sites More sharing options...
davej Posted March 26, 2014 Share Posted March 26, 2014 Yeah, this is one for Dsonesuk. I can't get the anchor text to center unless the div is wider than the longest word in the text. I can cheat by making the div wider, but that is cheating... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>hide-n-seek button</title><style>#wrap{ width:800px; margin:0 auto;}div.Leaf { text-align:center; /*margin: 0 6px 12px;*/ width: 120px; /* this is wider to allow the text to center */ height: 72px; border-style: none; /*border:1px dotted blue;*/ background-position:center center; background-image:url("b.jpg"); /*background-color:#eee;*/ background-size:72px 72px; background-repeat: no-repeat;} div.Leaf a, div.Leaf a:link, div.Leaf a:visited { text-align:center; display:inline-block; border-style: none; color:black;} div.Leaf img { display:inline-block; width:72px; height:72px; border-style: none;} div.Leaf a:hover img { visibility:hidden; /* hide img to reveal background */}div.Leaf a:hover { color: blue;}</style></head><body><div id="wrap"><div class="Leaf"><a href="#" title="Tooltip"><img src="a.jpg" alt="img"/>AllNaturopathy Link</a></div></div></body></html> Link to comment Share on other sites More sharing options...
wigginsda Posted March 27, 2014 Author Share Posted March 27, 2014 Thanks for your help, DaveJ. Your awesomeness is blinding! Link to comment Share on other sites More sharing options...
dsonesuk Posted March 28, 2014 Share Posted March 28, 2014 Like this? <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>hide-n-seek button</title> <style> #wrap{ width:800px; margin:0 auto; } .Leaf { text-align:center; /*margin: 0 6px 12px;*/ /*width: 120px; this is wider to allow the text to center removed by dsonesuk */ /* height: 72px;removed by dsonesuk */ border-style: none; /*border:1px dotted blue;*/ /*background-position:center center; dsonesuk old*/ background-position: center top;/* dsonesuk new */ background-image:url("b.jpg"); /*background-color:#eee;*/ background-size:72px 72px; background-repeat: no-repeat; display: inline-block;/*added by dsonesuk */ } div.Leaf a { text-align:center; display:inline-block; border-style: none; color:black; } div.Leaf img { /*display:inline-block; removed by dsonesuk*/ display:block; /*added by dsonesuk */ width:72px; height:72px; border-style: none; margin: 0 auto;/*added by dsonesuk */ } .Leaf a:hover img { visibility:hidden; /* hide img to reveal background */ } .Leaf a:hover { color: blue; } </style> </head> <body> <div id="wrap"> <div class="Leaf"> <a href="#" title="Tooltip"><img src="a.jpg" alt="img"/>AllNaturopathy Link</a> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
davej Posted March 28, 2014 Share Posted March 28, 2014 Yeah, I like that better because the width auto-sizes to match the text. Thanks Dsonesuk! Link to comment Share on other sites More sharing options...
wigginsda Posted March 28, 2014 Author Share Posted March 28, 2014 Thanks Dsonesuk! 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