将链接居中作为按钮 [英] 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>

我的两个元素具有相同的CSS，但是按钮居中，而不是我的链接. 如何以与按钮相同的方式计算链接的宽度? 是否可以在不向容器中添加属性的情况下?

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?

谢谢

推荐答案

您可以添加max-width/width属性和box-sizing:border-box以使它们的行为相同:

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>

您也可以尝试fit-content宽度值.只需注意浏览器支持即可: https://caniuse.com/#search=fit-content

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>

另一个想法是将display:block更改为display:table，链接和按钮的行为相同:

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>

这篇关于将链接居中作为按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！