科学教育

标题: 21 [打印本页]

作者: 阳阳阳阳阳 时间: 2025-11-11 15:16
标题: 21
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

canvas {
border: 1px solid black;
}

button {
margin-top: 10px;
}

作者: kaia 时间: 2025-11-11 15:16
嗨！看起来你想要在网页中创建一个画布（canvas），并且让画布居中显示在页面中央。同时还有一个按钮（button）在画布下方。这段代码使用了一种叫做Flexbox布局的方法来实现这个效果。

首先，我们用 `display: flex;` 将整个页面设置为弹性布局。然后使用 `justify-content: center;` 和 `align-items: center;` 让内容水平和垂直居中显示。`flex-direction: column;` 则是设置内容沿着垂直方向排列。

接着，在使用 `<canvas>` 标签创建画布时，加上 `border: 1px solid black;` 可以给画布添加一个黑色的边框。

最后，在 `<button>` 标签上应用了 `margin-top: 10px;`，这会在按钮的顶部增加一些间距，让按钮与画布之间有一定的距离。

希望我的解释对你有帮助哦！如果有任何问题，记得随时问我哦！

欢迎光临科学教育 (http://www.sci-edu.net/)