如何创建具有固定高度和宽度以及居中文本的锚按钮？

Question

这可能看起来微不足道，但我浏览了很多建议的解决方案，但一无所获。目标是创建一个具有固定高度和宽度的锚 <a> 按钮，同时保持文本居中（垂直和水平），而不管文本的宽度如何。

示例：

Answer 1

我找到的最佳解决方案如下：

定义垂直中心class:

.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;}

这用作按钮的内部容器，使文本垂直和水平居中。

定义一个按钮class:

.btn {
    width: 300px;
    height: 75px;
    background-color: transparent;
    color: #000;
    border-radius: 0;
    border: #000 solid 1px;
    cursor: pointer;
    text-align: center;}

用于设置按钮样式的 class btn 服务器。

我终于用锚标记 <a> 包裹了内部 div 到 link 按钮：

<a href="#">
  <div class="btn text-vertical-center">
      Button text
  </div>
</a>

据我所知，这似乎工作正常并且与大多数浏览器兼容。如果有更好的解决方案，请告诉我。

JSFiddle 示例：https://jsfiddle.net/MuaazO/ga4s540v/

如何创建具有固定高度和宽度以及居中文本的锚按钮？

How to create an anchor button with fixed height and width and centered text?

html

css

frontend