html css-内部垂直对齐按钮-如何将其置于顶部？

我得到了以下情况：

钮扣{
宽度：250px；
高度：250px；
背景：橙色；
填充：0px；
边框：1px纯黑；
显示：内联块；
位置：相对位置；
}
.图标{
宽度：150px；
保证金：0px自动0px自动；
高度：80px；
显示：块；
位置：相对位置；
背景：粉红色；
垂直对齐：顶部；
}

我想把div放在顶部的按钮里。 如果我使用负顶部，按钮内的另一个元素与第一个div元素不完全相同。如果我将图标div设置为垂直对齐顶部，则不会发生任何事情

为什么总是在中间？我怎样才能把这个放在上面？ 如果我使用a标签而不是具有相同规则的按钮，我不会遇到这个问题

---

有什么想法吗

你不应该把

放在

里面，它不是有效的文档

将

替换为

，然后它将按预期工作（）：

---

我有两种方法让我知道这些是否有效

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

或

---

不，我还需要要求的按钮标签！它应该与按钮标签或a标签或div标签相同。现在我必须使用图标的绝对位置：-(

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

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

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

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