Centering the link as the button

Question

.button {
  display: block;
  text-decoration: none;
  color: #103d82;
  background: #fff;
  border: 1px solid #d2cfcd;
  font-size: 1.4rem;
  line-height: 1;
  padding: 10px;
  text-align: center; 
}

div .button {
  margin: 0 auto;
}

<div>
  <a href="#" class="button">Link</a>
</div>
<div>
  <button type="button" class="button">Button</button>
</div>

My two elements have the same CSS, however button is centered and not my link. How to do the width of the link is calculated in the same way as the button? Is it possible without added properties to the container?

Thanks

No, in this case my button is not centered because margin 0 auto doesn't work with inline-block. — Steven Mouret, Dec 13 '17 at 11:12
Yes you are right, the width of my link is 100% and not my button. The width of the button is calculated by the browser. — Steven Mouret, Dec 13 '17 at 11:23
The `button` element behaves like a *replaced element* - which are elements whose appearance and dimensions are defined by an external resource. So although the `button` has a computed `display` property value of `block` it does not occupy the full available width of the containing parent element since its `width` property is already computed as well. For more information, see: https://stackoverflow.com/questions/27605390/why-doesnt-display-block-width-auto-stretch-a-button-to-fill-the-contai — UncaughtTypeError, Dec 13 '17 at 11:23

Temani Afif · Answer 1 · 2020-07-07T10:32:23.793

4

You can add max-width/width properties and box-sizing:border-box to make them behave the same :

.button {
  display: block;
  text-decoration: none;
  color: #103d82;
  background: #fff;
  border: 1px solid #d2cfcd;
  font-size: 1.4rem;
  line-height: 1;
  padding: 10px;
  text-align: center;
  max-width: 200px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

<div>
  <a href="#" class="button">Link</a>
</div>
<div>
  <button type="button" class="button">Button</button>
</div>

You can also try fit-content value of width. Simply pay attention to browser support: https://caniuse.com/#search=fit-content

.button {
  display: block;
  text-decoration: none;
  color: #103d82;
  background: #fff;
  border: 1px solid #d2cfcd;
  font-size: 1.4rem;
  line-height: 1;
  padding: 10px;
  text-align: center;
  width: fit-content;
  box-sizing: border-box;
  margin: 0 auto;
}

<div>
  <a href="#" class="button">Link</a>
</div>
<div>
  <button type="button" class="button">Button</button>
</div>

Another idea is to change the display:block to display:table and both links and buttons will behave the same :

.button {
  display: table;
  text-decoration: none;
  color: #103d82;
  background: #fff;
  border: 1px solid #d2cfcd;
  font-size: 1.4rem;
  line-height: 1;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
  margin: 0 auto;
}

<div>
  <a href="#" class="button">Link</a>
</div>
<div>
  <button type="button" class="button">Button</button>
</div>

edited Jul 07 '20 at 10:32

answered Dec 13 '17 at 11:12

Temani Afif

245,468
26
309
415

@StevenMouret not too robust, you mean what ? :) – Temani Afif Dec 13 '17 at 11:24
@StevenMouret i added another solution ;) – Temani Afif Dec 13 '17 at 11:27
1

You know the OP is in good hands when Mr Afif is on the scene :) For the record, it may be worth considering to mention that `keyword` `width` values, like `fit-content`, are currently under the specification status of "Working Draft", and considered an *experimental API* recommended not to be used in production. Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/width#fit-content **&** https://developer.mozilla.org/en-US/docs/Web/CSS/width#Specifications **as well as** https://developer.mozilla.org/en-US/docs/Web/CSS/width#Browser_compatibility – UncaughtTypeError Dec 13 '17 at 11:34
@UncaughtTypeError yes i totaly agree :) that's why i added the "caniuse" link but i will elaborate more with your links ;) – Temani Afif Dec 13 '17 at 11:37
I overlooked that link for some reason :/ – UncaughtTypeError Dec 13 '17 at 11:39
Can't miss it now :) – UncaughtTypeError Dec 13 '17 at 11:41
1

Robust is not the good word. Your solution require to give a default width. But I think I will do that. Thanks guys. – Steven Mouret Dec 13 '17 at 13:02
@StevenMouret i updated my answer with another way if you are still interested :) – Temani Afif Dec 22 '17 at 09:04

score 0 · Answer 2 · answered Dec 13 '17 at 11:10

What you can do is to change display: block to display: inline-block instead then add text-align: center to their parents instead of margin: 0 auto as follow:

.button {
  display: inline-block;
  text-decoration: none;
  color: #103d82;
  background: #fff;
  border: 1px solid #d2cfcd;
  font-size: 1.4rem;
  line-height: 1;
  padding: 10px;
  text-align: center; 
}

div {
  text-align: center;
}

<div>
  <a href="#" class="button">Link</a>
</div>
<div>
  <button type="button" class="button">Button</button>
</div>

Yes but in your case you add property to the parent. Button does not need specificity on its parent. — Steven Mouret, Dec 13 '17 at 11:17

score 0 · Answer 3 · answered Dec 13 '17 at 11:33

Try This:

* {
   box-sizing: border-box;
}

div {
   width: 100px;
   position: relative;
   margin: 0 auto;
}

.button {
   width: 100%;
   display: block;
   text-decoration: none;
   color: #103d82;
   background: #fff;
   border: 1px solid #d2cfcd;
   font-size: 1.4rem;
   text-align: center; 
   padding: 10px;
}

<div>
  <a href="#" class="button">Link</a>
</div>
<div>
  <button type="button" class="button">Button</button>
</div>

Centering the link as the button

3 Answers3

Linked

Related