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

Question

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

我知道获得相同结果的唯一其他方法是使用 2 个 div。一个带有 display: table 的 wrapper , 和一个带有 display: table-cell 的 div和 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);
}