Question

我注意到在使用<button></button>元素时，浏览器自然会假设您想要内联内联内容，并且该元素是可点击的。是否有可能通过css以相同的方式运行div？我浏览了UA样式表，看看我是否可以弄明白，但没有任何东西让它垂直居中。

我知道获得相同结果的唯一方法是使用2个div。一个包含display: table的包装器，以及一个包含display: table-cell和vertical-align: middle的div。

但这会产生额外的div。只用一个元素就可以实现相同的行为吗？

感谢。

Answer 1

http://jsfiddle.net/8Sj4A/3/ - 这会垂直和水平居中（只是将text-align: center;添加到原来的答案中）

div {
    display:inline-block;
    color:#444;
    border:1px solid #CCC;
    background:#DDD;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    cursor:pointer;
    vertical-align:middle;
    max-width: 100px;
    padding: 5px;
    text-align: center;
}
div:active {
    color:red;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
}

Answer 2

您可以将div的内容居中，在每边添加相同数量的填充。

padding:2px 10px;

这会在顶部和底部增加2px，向左和向右增加10px，从而将内容集中在div中。

我还将div的其余部分设计为外观和行为button。外观基于Firefox的默认<button>。

http://jsfiddle.net/evSb5/2/

Answer 3

也许你问的是错误的问题。

为按钮提供一个类可能更简单，然后确保内联内容的样式符合您的要求。

你可以把任何东西放在DIV中，你应该可以放一个按钮。

Answer 4

你不需要多个div，检查这个JSFiddle，它是一个外观和行为类似按钮的DIV。

HTML：

<div class='btn'>
  this looks like a button
</div>

CSS：

.btn{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;

    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

如果您希望按钮实际链接到某些内容（行为类似于链接），只需将HTML更改为：

<a href='test.html' class='btn'>
  this looks like a button
</a>

如果使用bootstrap，则不必定义.btn类，它包含在内。

Answer 5

的CSS：

div.button {
  display:inline-block;
  -webkit-appearance:button;
  padding:3px 8px 3px 8px;
  font-size:13px;
  position:relative;
  cursor:context-menu;
}

HTML：

<div role="button" class="button">Press Me!</div>

这让你尽可能接近真正的按钮。

除Chrome以外的任何内容：查找appearance。实际上，只需使用Chrome ...：）

如何设置像按钮元素一样的div？

5 个答案: