Question

有没有办法关闭此功能？ <button>的内容始终垂直居中，而不是常规HTML标记中的内容。

我希望<button>表现得像<a>，文字位于按钮的左上角。

我正在寻找一个特定于WebKit的修复，也许有一些-webkit-* css属性可以控制这种行为。 欢迎黑客，但不使用额外的标记！

提前谢谢你：）

.button
{
    display:inline-block;
    height:200px;
    border:4px gainsboro outset;
    background:silver;
    vertical-align:middle;
    padding:20px;
    box-sizing:border-box;
    text-decoration:none;
    width:200px;
    text-align:left;
}

<button class="button">&lt;button&gt;</button>
<a href="http://www.google.com" class="button">&lt;a&gt;</a>

Answer 1

添加：

button:before {
    content:'';
    display:block;
    margin-top:-50%;
}

请参阅http://jsfiddle.net/r6yXw/

并且，如果您希望它仅适用于基于webkit的浏览器，请将其包装在

中

@media screen and (-webkit-min-device-pixel-ratio:0) { ... }

请参阅http://jsfiddle.net/r6yXw/1/

Answer 2

我看到你没有要求额外的标记，但是如果你决定沿着那条路走下去，一个简单的想法是使用定位和一个额外的元素。

button {
  position: relative;
}

button > span {
  position: absolute;
  top: 0;
}

<button><span>&lt;button&gt;</span></button>

Answer 3

你做不到。并非在<span>内引入<button>并使用定位：

<button class="button"><span>&lt;button&gt;</span></button>

然后将以下内容添加到.button：

.button
{
    /* ... */
    position:relative;
}

.button > span {
    position: absolute;
    top: 20px;
    left: 20px;
}

Demo

如果您想保持HTML完好无损，您也可以使用JavaScript修改文档：

$('button.button').wrapInner('<span>');

请注意，如果禁用JavaScript，则无效：）

Answer 4

button {
  height: 100px;
  display: flex;
}

Answer 5

检查一下：P JSFIDDLE DEMO

   .button
{
    display:block;
    height:200px;
    border:4px gainsboro outset;
    background:silver;
    vertical-align:top;
    padding:20px;
    box-sizing:border-box;
    width:200px;
    text-align:left;
    text-indent: 0;
    white-space: normal;
    word-spacing: 0px;
    letter-spacing: 0px;
    float: left;
    top:0;
}

它可能会起作用。我真的不知道你需要什么按钮。但这可以看到就像你之前所问的那样。在这里使用它。

<title>Documento sin título</title>
<body>
<form id="form1" name="form1" method="post" action="">
  <button class="button">tODAY WE ARE HERE WONDERING WHAT TO DO<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></button>
</form>
</body>

如何关闭<button>内容的自动垂直对齐？</button>

5 个答案: