默认情况下,按钮元素内的文本垂直居中对齐。我无法弄清楚哪个属性控制此行为。如何更改按钮顶部或底部的对齐方式?
button {
height: 100px;
}
我知道我可以在按钮元素内使用 Flexbox 或其他方法来实现此目的,但我想了解浏览器的用户代理样式表如何处理此问题。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
button {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body>
<button> Click Me! </button>
</body>
</html>
将显示设置为flex,然后使用align-items和justify-content属性使文本居中