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