为什么此按钮的文本居中？ [英] Why is this button’s text centered?

问题描述

为什么基本的< button> 元素的文本内容垂直居中？在检查器中查看了按钮的样式之后，我一直无法弄清是哪个CSS属性负责。

Why is the text content of a basic <button> element centered vertically? After looking through the button's styles in the inspector, I have been unable to figure out which CSS property is responsible for this.

button {
  width: 200px;
  height: 100px;
  text-align: left;
}

<button>lorem ipsum</button>

推荐答案

我对此行为进行了很多思考，但找不到正确答案，只是一个把戏

I think a lot about this behavior but can't find correct answer , just a trick

    button {
      width: 200px;
      height: 100px;
      text-align: left;
      position:relative;
    }
    
    button span {
      position:absolute;
      bottom:0;
      width:100%;
      text-align:center;
    }

<button ><span>Example</span></button>

这篇关于为什么此按钮的文本居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！