<button>我觉得这个元素周围有一些神奇的东西.
考虑这个标记:
<button class="button">Some Text</button>
<div class="button">Some Text</div>
这个CSS:
.button{
background: darkgrey;
height: 40px;
border: 2px solid grey;
width: 100%;
box-sizing: border-box;
font-size: 14px;
font-family: helvetica;
text-align: center;
margin-bottom: 20px;
/*I'm aware I could use this to center it*/
/*line-height: 40px;*/
}
是什么让按钮元素中的文本垂直居中？WebKit的似乎是预先定义-webkit-box-align与值center的<button>元素.如果我将其设置为initial文本不再与中心对齐.但这似乎并不是完全的魔力,因为另一方面,我没有运气使用-webkit-box-align属性将文本集中在div上.
这是一个小提琴:http://jsfiddle.net/cburgdorf/G5Dgz/
我希望我的按钮和锚点看起来一样.但是当我在一个按钮/锚点内有长文本时,它应该断开并显示垂直居中的文本.当有足够的空间时,文本也应居中.
为了使文本居中而不是在文本中断时溢出我设置了line-height:1我也设置vertical-align:1了当然我必须设置white-space: normal否则文本不会中断并且按钮会溢出.
现在我有以下问题(用chrome测试):当文本是单行时,它将不再在锚标记内居中...此外我不想更改DOM(将文本包裹在span等内...)
你能告诉我为什么按钮的行为与锚不同吗？我已经检查了chrome检查器中的所有样式(computed - > show all).我还检查了:before和:after样式.
.btn{
white-space: normal !important;
height: 45px !important;
vertical-align: middle !important;
line-height: 1 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-2">
<a href="#" class="btn btn-default">test loooooooooooooooooooongstring<a>
<br /><br />
<button class="btn btn-default">test loooooooooooooooooooongstring</button>
</div>
</div>
<br /><br /><br />
<div class="row">
<div class="col-xs-12">
Should be centered!!
<br />
<a href="#" class="btn …