HTML / CSS按鈕和鏈接垂直對齊

Question

我想垂直居中<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，它可以解決問題，但是我不知道為什么使用line-height:0 ，我無法實現想要的東西。

Answer 1

您可以為此使用flexbox 。 包裝你buttons和a標簽在容器和使用彎曲特性。 我還添加了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> 

Answer 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> ）。

Answer 3

我只是想知道為什么已經有<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
    });
  }