[英]Vertically center text using box-align on inline-block element
I'm trying to center text vertically in an inline-block element (and particularly in webkit browsers). 我试图将文本垂直居中在一个内联块元素中(特别是在webkit浏览器中)。 Pretty much exactly what the <button> element does out of the box.
几乎就是<button>元素开箱即用的东西。
I've tried using box-align, as in this question Vertical align text in block element but I don't want to set an explicit width on the element: I want it to fit to its contents, ie I want display: inline-block type behavior. 我尝试过使用box-align,就像在这个问题中一样, 在块元素中垂直对齐文本,但我不想在元素上设置显式宽度:我希望它适合其内容,即我想要显示:inline-块类型行为。
In Firefox, -moz-box appears to behave the way I want, but in Safari and Chrome, -webkit-box makes the div want to fill its container horizontally. 在Firefox中,-moz-box似乎按照我想要的方式运行,但在Safari和Chrome中,-webkit-box使div想要水平填充其容器。
[oops, can't post image as I'm a noob] [oops,不能发布图片,因为我是菜鸟]
Fiddle here with examples of various settings. 这里有各种设置的例子。
Looking at webkit's inspector on an actual <button> element, it defaults to display: inline-block and yet it obeys -webkit-box-align as if it were set to display: -webkit-box. 在实际的<button>元素上查看webkit的检查器,它默认显示:inline-block,但它遵循-webkit-box-align,就好像它被设置为display:-webkit-box一样。 See the fiddle where I explicitly set display:inline-block and -webkit-box-align: end on a <button> to demonstrate.
请参阅我明确设置display的小提琴 :inline-block和-webkit-box-align:end在<button>上进行演示。
It seems that by adding an extra <div> into the mix, I can get the behavior I want, but I'd really rather not do that. 似乎通过在混音中添加一个额外的<div>,我可以得到我想要的行为,但我真的不愿意这样做。 I'm also aware of the display: table-cell technique for vertical centering;
我也知道显示器:用于垂直居中的table-cell技术; this is not appropriate here as it has other side-effects.
这不合适,因为它有其他副作用。
So is webkit's behavior correct? webkit的行为是否正确? How does the <button> element do what the <div> can't?
<button>元素如何做<div>不能做的事情? Is there some under-the-hood webkit CSS property that I haven't spotted that could make the <div> behave like the <button>?
是否有一些我没有发现的幕后webkit CSS属性可以使<div>表现得像<button>? Or even better, any cross-browser way of doing this?
甚至更好,任何跨浏览器的方式这样做?
use line-height property of css. 使用css的line-height属性。 make it equal to the height of the box containing text.
使其等于包含文本的框的高度。
http://www.w3schools.com/cssref/pr_dim_line-height.asp http://www.w3schools.com/cssref/pr_dim_line-height.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.