2

Below is a test file, test.htm, which results with this in Firefox:

testhtm

The <div> is green with yellow border and specified size, and the <a> is with red border. Clearly, the anchor tag has both larger width and height that the div that it contains. How can I make the anchor tag equal in size to its div contents - however, in such a way that the size and position of the <div> is unchanged? Basically, for this example and the browser window size shown, I'd want this (manually edited pic):

testhtm2

test.htm:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
body {
  padding:0;
  margin:0;
  width: 100%;
  height: 100%;
  background-color: white;
  color: darkred;
}
div#button {
  margin-top: 2vh;
  padding: 2em;
  width: 20em;
  border-style: solid;
  border-width: 2px;
  border-color: yellow;
  background-color: lightgreen;
  text-align: center;
  font-size: 3vh;
  /* to center div horizontally: */
  margin-left: auto;
  margin-right: auto;
}
a {
  text-decoration: none; /*remove underline of a href link:*/
  display: block;
  width: auto;
  padding: 0;
  margin: 0;
  color: unset;
  border-style: solid;
  border-width: 2px;
  border-color: red;
}
  </style>
</head>

<body>
<br/>
<a href="test.zip" target="_blank"><div id="button">Download this</div></a>
</body>
</html>
1
  • 2
    Depending on how it is being used you could set it to display: inline-block; instead of display: block;. Aug 31, 2016 at 11:29

2 Answers 2

6

Change the a from display: block; to display: inline-block;.
In order to get the exact same height, remove the margin-top of the div.

In order to keep it centered, add text-align:center to the parent element, in your case your body. Note: in this way, everything inside the body will be centered.
If you only want your a-tag be centered, add a wrapper div around it and add the text-align:center.

Codepen example:
http://codepen.io/anon/pen/jrNvzx

4
  • Many thanks @MichaelSchmidt; however that messes up the horizontal centering of the div (done with margin-left/right auto); I have clarified the OP with the results I want to get. Any suggestions for that?
    – sdaau
    Aug 31, 2016 at 11:42
  • 1
    @sdaau: add text-align:center; to your body. Note that everything inside of the body will be centered. Or add a wrapper around your HTML and. I updated the codepen demo Aug 31, 2016 at 11:47
  • Thanks, @MichaelSchmidt - looks like the wrapper technique is what I'd need.. cheers!
    – sdaau
    Aug 31, 2016 at 11:50
  • @sdaau: Nice, glad I could help. Aug 31, 2016 at 11:50
1

Try this:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
body {
  padding:0;
  margin:0;
  width: 100%;
  height: 100%;
  background-color: white;
  color: darkred;
}
div#button {
  padding: 2em;
  width: 20em;
  border-style: solid;
  border-width: 2px;
  border-color: yellow;
  background-color: lightgreen;
  text-align: center;
  font-size: 3vh;
  /* to center div horizontally: */
  margin-left: auto;
  margin-right: auto;
}
a {
  text-decoration: none; /*remove underline of a href link:*/
  display:inline-block;
  width: auto;
  padding: 0;
  margin: 0;
  color: unset;
  border-style: solid;
  border-width: 2px;
  border-color: red;
}
  </style>
</head>

<body>
<br/>
<a href="test.zip" target="_blank"><div id="button">Download this</div></a>
</body>
</html>

1
  • Thanks @ AbhishekPandey, but this does the same as @MichaelSchmidt - and same as there, the horizontal centering is not preserved, which is what I'd want. Any suggestions for that?
    – sdaau
    Aug 31, 2016 at 11:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.