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

Question

我想垂直居中對齊<button>和<a>元素。我爲每個CSS內聯塊屬性使用。勉強，我的<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，我不能acheive一個想要的東西。

Answer 1

您可以使用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>

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 
    }); 
    }