HTML/CSS 按钮和 A 链接垂直对齐答案

【问题标题】：HTML/CSS Button and A link vertical alignmentHTML/CSS 按钮和 A 链接垂直对齐
【发布时间】：2017-12-26 10:08:39
【问题描述】：

我想垂直居中 <button> 和 <a> 元素。我为每个使用 CSS inline-block 属性。奇怪的是，我的<a> 链接向下移动了。

button,
.btn {
  display: inline-block;
  padding: 0;
  margin: 0;
  margin-left: 10px;
  color: #ffffff;
  background-color: #00ade0;
  border: 2px solid #fff;
  height: 4rem;
  width: 4rem;
  font-size: 1.5rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  line-height: 0;
  text-align: center;
  text-decoration: none;
}

<button>
  1
</button>
<button>
  2
</button>
<a href="#" class="btn">
  3
</a>

我知道如果我改变行高，它可以解决问题，但我不知道为什么用line-height:0，我无法实现我想要的。

【问题讨论】：

标签： html css button hyperlink vertical-alignment

【解决方案1】：

我只是想知道当您已经拥有 <button> 元素时为什么还要使用 <a> 元素。它可以正确显示，只需对您的 HTML/CSS 进行少量修改。它为您的 HTML 代码而来：

<button>1</button>
<button>2</button>
<button>3</button>

还有你的 CSS：

 button
 {
   display: inline-block;
   padding: 0;
   margin: 0;
   margin-left: 10px;
   color: #ffffff;
   background-color: #00ade0;
   border: 2px solid #fff;
   height: 4rem;
   width: 4rem;
   font-size: 1.5rem;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
  }

通过放置<a> 元素，我认为您想在按钮上添加点击操作。如果是这种情况，您可以使用这样的一点 Javascript 来完成：

var buttons = document.body.querySelectorAll('button');
  for(var i = 0, c = buttons.length; i < c; i++) {
    buttons[i].addEventListener('click', function() {
      //Redirect user with your links here
    });
  }

【讨论】：

我使用链接和按钮，用于可访问性和语义目的。按钮用于页面上的操作和链接以到达另一个页面。感谢您的回答！

【解决方案2】：

问题似乎与您指定width 和height 有关，尽管还有其他多余的声明（例如border-radius 的特定于浏览器的声明）。如果我们将width 和height 替换为填充...你会得到更一致的结果：`

button, .btn {
    display: inline-block;
    padding: 1rem 1.5rem;
    margin: 0;
    margin-left: 10px;
    box-sizing: border-box;

    color: #ffffff;
    background-color: #00ade0;

    border: 2px solid #fff;
    border-radius: 999px;
    
    text-align: center;
    text-decoration: none;
    font: 1.5rem Helvetica, sans-serif;
}

<button>
  1
</button>
<button>
  2
</button>
<a href="#" class="btn">
  3
</a>

我将您的border-radius 更改为以像素为单位的高得离谱的数字，因为（根据我的经验）在尝试实现真正的圆圈时，这似乎比百分比提供了更多的一致性。为了保持一致性，我还添加了box-sizing，并为所有项目指定了一种字体，因为<button> 似乎有一个浏览器定义的字体，可能与默认字体不同（将用于<a>）

【讨论】：

谢谢，这是一个不错的解决方案，看起来很有效！ :) 只是想知道为什么高度会导致偏移定位问题。
是浏览器默认值和line-height的组合问题。前者导致您的锚链接以不同的默认字体呈现文本，而line-height 加剧了这种情况。通过统一 <button> 和 .btn 的字体并删除行高、宽度和高度来代替填充，我们解决了所有这些潜在问题。
感谢您的回答！ :)

【解决方案3】：

您可以为此使用flexbox。将您的 buttons 和 a 标记包装在容器中并使用 flex 属性。我还添加了box-sizing: border-box 以确保元素之间的一致性。如果您有任何问题，请告诉我。

.container {
  display: flex;
  align-items: center;
}

button,
.btn {
  padding: 0;
  margin: 0;
  margin-left: 10px;
  color: #ffffff;
  background-color: #00ade0;
  border: 2px solid #fff;
  height: 4rem;
  width: 4rem;
  font-size: 1.5rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  box-sizing: border-box;
}

<div class="container">
  <button>
    1
  </button>
  <button>
    2
  </button>
  <a href="#" class="btn">
  3
</a>
</div>

【讨论】：