CODEWITHSUNDEEP
css
Steven Mouret
Steven Mouret

Reputation: 5940

Centering the link as the button

.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

Upvotes: 1

Views: 78

Answers (3)

Temani Afif
Temani Afif

Reputation: 274086

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>

Upvotes: 4

Ehsan
Ehsan

Reputation: 12969

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>

Upvotes: 0

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3223

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>

Upvotes: 0

Related Questions