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

Question

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

我知道获得相同结果的唯一另一种方法是使用2个div.一个包装器display: table,和一个div display: table-cell和vertical-align: middle.

但这会产生额外的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 中的内容都应该能够放入按钮中。