html - 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 元素之后。如果我将 icon-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;
}