CSS按钮 – 文本垂直居中
在本文中，我们将介绍如何使用CSS来创建一个按钮，并垂直居中按钮上的文本。
阅读更多：CSS 教程
设置按钮样式
首先，我们需要设置按钮的样式。我们可以通过使用CSS的button选择器来选择所有按钮，并设置其外观。下面是一个示例：
button {
border: none;
background-color: #f44336;
color: white;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
}
在上面的代码中，我们将按钮的边框设置为无边框，设置背景颜色为红色，文本颜色为白色，并设置了一些内边距和光标样式。你可以根据自己的喜好和设计需要来调整这些样式。
水平居中按钮
接下来，我们来看如何水平居中按钮。要实现水平居中，我们可以使用margin: 0 auto;样式规则。下面是一个示例：
button {
margin: 0 auto;
}
使用上述代码，按钮将水平居中对齐。你可以将这段代码添加到按钮的样式中。
垂直居中按钮文本
接下来，我们来解决如何垂直居中按钮上的文本。在默认情况下，按钮文本位于按钮的顶部。要垂直居中文本，我们可以使用CSS的line-height属性。下面是一个示例：
button {
line-height: 30px;
}
上述代码中，我们将按钮的line-height属性设置为按钮的高度。这样，按钮上的文本将垂直居中对齐。你可以根据按钮的高度和字体大小来调整这个值。
示例
下面是一个完整的示例，展示了如何水平居中按钮并垂直居中按钮文本：
<!DOCTYPE html>
<html>
<head>
<style>
button {
border: none;
background-color: #f44336;
color: white;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
margin: 0 auto;
line-height: 30px;
}
</style>
</head>
<body>
<button>点击我</button>
</body>
</html>
在上面的示例中，我们通过应用上述所述的样式规则来创建一个水平居中且垂直居中文本的按钮。
总结
通过使用CSS，我们可以轻松地创建一个水平居中且垂直居中文本的按钮。我们可以使用margin: 0 auto;来实现水平居中，并使用line-height属性来实现垂直居中。通过调整样式规则中的值，我们可以进一步定制按钮的外观和文本的位置。希望本文对你理解如何创建一个居中文本的CSS按钮有所帮助！
此处评论已关闭