如何垂直对齐按钮内的文本

问题描述 投票:0回答:1

默认情况下,按钮元素内的文本垂直居中对齐。我无法弄清楚哪个属性控制此行为。如何更改按钮顶部或底部的对齐方式?

button {
    height: 100px;
}

我知道我可以在按钮元素内使用 Flexbox 或其他方法来实现此目的,但我想了解浏览器的用户代理样式表如何处理此问题。

html css
1个回答
0
投票

<!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属性使文本居中

© www.soinside.com 2019 - 2024. All rights reserved.