哪个魔术CSS导致text-vertical-align的区别< button>和< div&gt ;? [英] Which magic CSS causes the difference of text-vertical-align between <button> and <div>?

问题描述

我发现< button> 里面的文本会自动垂直居中，而< div> 顶部对齐。

我试图找出哪个CSS规则产生了差异但失败了。

  div，button {width：4em;身高：4em; background-color：red; padding：0; border：0; margin：1em; font-size：1em; font-family：Arial;} div {text-align：center; display：inline-block; cursor：default; box-sizing：border-box;}  

 < div> ;文本文本< / div>< button>文本文本< / button>< div>文本文本文本文本< / div>< button>文本文本文本文本< / button>< div&文本< / div>< button>文本文本文本文本文本文本< / button>  

对于上面的例子，比较所有从Chrome计算的CSS规则，我只能找到一个不同的对 - align-items：stretch for < code>< code>< button> code>。

但是分配 align-items：flex-start

令人困惑的是 < div> 和< button> ，即使您将所有CSS规则设置为相同的对应值。 ，< div> 和< button> 为什么？

引擎盖下的魔法是什么？

---

我可以垂直居中< div> 里面的文本（下面的例子）。我只是想知道什么原因导致文本垂直对齐之间的区别。

也许它不是由一个特定的CSS规则，而是因为布局算法两个元素在浏览器中不同？

  div，button {width：4em; height：4em; background-color：red; padding：0; border：0; margin：1em; font-size：1em; font-family：Arial;} div {/ *基本CSS规则到button-fy * / text-align：center; display：inline-block; cursor：default; box-sizing：border-box;} / * Magic * / div，button {vertical-align：middle;} div span {display：inline-block;位置：相对; top：50％; -webkit-transform：translateY（-50％）; transform：translateY（-50％）;}  

  < / span>< div>< / span>< / div><按钮>文本文本文本文本< / button>< div>< span>文本文本文本文本文本< / span>< / div>< button>文本文本文本文本文本< / button& c $ c> 
 

解决方案

c $ c> inline-block ，您需要使用 vertical-align 作为默认值 baseline ：

Magic CSS ：

  vertical-align：middle; 
  

以上将修复它：

  div，button {width：4em; height：4em; background-color：red; padding：0; border：0; margin：1em; font-size：1em; font-family：Arial; vertical-align：middle;} div {text-align：center; display：inline-block; cursor：default; box-sizing：border-box;}  

 < div> ; text< / div>< button> text< / button>  

对于 div 中的文本要居中，您需要使用 line-height

  line-height：4em; 
  

  div ，button {width：4em; height：4em; background-color：red; padding：0; border：0; margin：1em; font-size：1em; font-family：Arial; vertical-align：middle; line-height：4em;} div {text-align：center; display：inline-block; cursor：default; box-sizing：border-box;}  

 < div> ; text< / div>< button> text< / button>  

I found that the text inside of <button> is automatically vertically centered, while text inside of <div> is top aligned.

I tried to find out which CSS rule made the difference but failed.

div,
button {
  width: 4em;
  height: 4em;
  background-color: red;
  padding: 0;
  border: 0;
  margin: 1em;
  font-size: 1em;
  font-family: Arial;
}

div {
  text-align: center;
  display: inline-block;
  cursor: default;
  box-sizing: border-box;
}

<div>text text</div>
<button>text text</button>

<div>text text text text</div>
<button>text text text text</button>

<div>text text text text text text</div>
<button>text text text text text text</button>

As for the above example, comparing all the computed CSS rules from Chrome, I could only find one different pair -- align-items: stretch for <div> while align-items: flex-start for <button>.

But assigning align-items: flex-start doesn't help. So I got totally confused.

what confused me is that the text-vertical-alignment is different between <div> and <button> even if you set all the CSS rules with the same corresponding value. In other words, with the same CSS rules, <div> and <button> behave differently. Why?

What is the magic under the hood?

---

I can vertically center text inside of <div> (example below). I'm just curious about what causes the difference between the text-vertical-alignment.

Maybe it's not caused by a particular CSS rule, but because the layout algorithms for the two elements are different in browser?

div,
button {
  width: 4em;
  height: 4em;
  background-color: red;
  padding: 0;
  border: 0;
  margin: 1em;
  font-size: 1em;
  font-family: Arial;
}

div { /* basic CSS rules to button-fy  */
  text-align: center;
  display: inline-block;
  cursor: default;
  box-sizing: border-box;
}

/* Magic */
div, button {
  vertical-align: middle;
}

div span {
  display: inline-block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

<div><span>text text</span></div>
<button>text text</button>

<div><span>text text text text</span></div>
<button>text text text text</button>

<div><span>text text text text text text</span></div>
<button>text text text text text text</button>

解决方案

Since you are using inline-block, you need to use vertical-align as the default is baseline:

Magic CSS:

vertical-align: middle;

The above will fix it:

div,
button {
  width: 4em;
  height: 4em;
  background-color: red;
  padding: 0;
  border: 0;
  margin: 1em;
  font-size: 1em;
  font-family: Arial;
  vertical-align: middle;
}

div {
  text-align: center;
  display: inline-block;
  cursor: default;
  box-sizing: border-box;
}

<div>text</div>
<button>text</button>

And for the text inside the div to be centred, you need to use line-height to the height of the div.

Magic CSS:

line-height: 4em;

div,
button {
  width: 4em;
  height: 4em;
  background-color: red;
  padding: 0;
  border: 0;
  margin: 1em;
  font-size: 1em;
  font-family: Arial;
  vertical-align: middle;
  line-height: 4em;
}

div {
  text-align: center;
  display: inline-block;
  cursor: default;
  box-sizing: border-box;
}

<div>text</div>
<button>text</button>

这篇关于哪个魔术CSS导致text-vertical-align的区别< button>和< div&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！