我注意到在使用 <button></button>
时元素,浏览器自然会假定您希望将内联内容居中,并且该元素是可点击的。是否可以通过 css 让 div 以相同的方式运行?我浏览了 UA-stylesheet 看看我是否能弄明白,但没有任何东西使它垂直居中。
我知道获得相同结果的唯一其他方法是使用 2 个 div。一个带有 display: table
的 wrapper , 和一个带有 display: table-cell
的 div和 vertical-align: middle
.
但这会创建一个额外的 div。是否有可能只用一个元素实现相同的行为?
谢谢。
最佳答案
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);
}
关于html - 如何像按钮元素一样设置 div 的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23608346/