温馨提示:这篇文章已超过230天没有更新,请注意相关的内容是否还可用!
![html 按钮 javascript【HTML 按钮 居中:代码示例】 html 按钮 javascript【HTML 按钮 居中:代码示例】](https://www.guihejia.com/zb_users/upload/2023/11/202311251700918750355185.jpg)
HTML 按钮可以通过CSS样式来实现居中显示。我们可以使用CSS的`text-align`属性来实现按钮的水平居中。将父元素的`text-align`属性设置为`center`,按钮就会在父元素中水平居中显示。
示例代码如下:
<style>
.container {
text-align: center;
}
</style>
<div class="afe4-e20c-2116-bed5 container">
<button>按钮</button>
</div>
上述代码中,我们创建了一个名为`.container`的CSS类,将其`text-align`属性设置为`center`。然后,我们在`.container`元素内部放置了一个按钮元素`<button>`。由于按钮元素位于`.container`元素内部,并且`.container`元素的`text-align`属性设置为`center`,按钮就会在`.container`元素中水平居中显示。
除了水平居中,我们还可以使用CSS的`vertical-align`属性来实现按钮的垂直居中。将按钮的`vertical-align`属性设置为`middle`,按钮就会在父元素中垂直居中显示。
示例代码如下:
<style>
.container {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="2116-bed5-c708-a134 container">
<button style="vertical-align: middle;">按钮</button>
</div>
上述代码中,我们创建了一个名为`.container`的CSS类,将其`height`属性设置为`200px`,并使用`display: flex;`、`align-items: center;`和`justify-content: center;`来实现容器内元素的垂直和水平居中。然后,我们在`.container`元素内部放置了一个按钮元素`<button>`,并将按钮的`vertical-align`属性设置为`middle`,按钮就会在`.container`元素中垂直居中显示。
通过使用这些CSS样式,我们可以轻松地实现HTML按钮的居中显示。