html css - 按鈕內部的垂直對齊 - 如何獲得它的頂部？

Question

我得到了以下情況： jsfiddle

<button type="submit"> 
    <div class="icon"></div> 
</button> 

button { 
    width: 250px; 
    height: 250px; 
    background: orange; 
    padding: 0px; 
    border: 1px solid black; 
    display: inline-block; 
    position: relative; 
} 
.icon { 
    width: 150px; 
    margin: 0px auto 0px auto; 
    height: 80px; 
    display: block; 
    position: relative; 
    background: pink; 
    vertical-align: top; 
} 

我想在頂部的按鈕在div。 如果我使用負頂部按鈕內的其他元素不是確切的後第一個div元素。如果我設置垂直對齊頂部圖標div沒有任何反應。

爲什麼總是在中間？我怎麼能得到這個頂部？ 如果我使用a-tag而不是具有相同規則的按鈕，我不會收到此問題。

有什麼想法？

Answer 1

你不應該把<div>放在<button>之內，它不是一個有效的文件。

更換<button>與<div>，然後它將按預期工作（JSFiddle）：

<div type="submit"> 
    <div class="icon"></div> 
</div> 

和CSS：

div[type="submit"] { // Only change here, to properly match div instead of a button 
    width: 250px; 
    height: 250px; 
    background: orange; 
    padding: 0px; 
    border: 1px solid black; 
    display: inline-block; 
    position: relative; 
} 
.icon { 
    width: 150px; 
    margin: 0px auto 0px auto; 
    height: 80px; 
    display: block; 
    position: relative; 
    background: pink; 
    vertical-align: top; 
} 

Answer 2

我有兩種方式讓我知道，如果這些工作

.icon{ 
position: absolute; 
top: 0; 
left: 45px; 
} 

或

.icon{ 
position: relative; 
top: -85px; 
}