html代码按钮怎么居中

要在 HTML 中将按钮居中,可以使用 CSS 样式来设置按钮的外部容器元素的属性。以下是一种常用的方法:

将按钮放置在一个容器元素内,如 divspan

设置容器元素的 text-align 属性为 center,这将使按钮在容器内居中。

可以设置按钮本身的 display 属性为 inline-blockblock,以便使它在容器内具有一定的宽度和高度。

下面是一个 HTML 代码示例,其中一个按钮被设置为居中显示:

<!DOCTYPE html>
<html>
<head>
	<title>居中按钮</title>
	<style>
		.container {
			text-align: center;
		}
		.btn {
			display: inline-block;
			padding: 10px;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="container">
		<button class="btn">居中按钮</button>
	</div>
</body>
</html>

 
  • 按钮居中