我需要两个按钮在一行居中的html css 代码
时间: 2023-05-17 12:04:30 浏览: 529
可以使用以下代码实现:
```html
<div style="text-align: center;">
<button>按钮1</button>
<button>按钮2</button>
</div>
```
```css
button {
margin: 0 10px; /* 可以根据需要调整按钮之间的间距 */
}
```
这样可以让两个按钮在一行居中显示。
相关问题
在html表单中一行有两个按钮,如何居中显示
您可以使用CSS样式来实现在HTML表单中一行有两个按钮并居中显示的效果。以下是一种实现方法:
HTML代码:
```html
<div class="button-container">
<button>按钮1</button>
<button>按钮2</button>
</div>
```
CSS代码:
```css
.button-container {
display: flex;
justify-content: center;
}
.button-container button {
margin: 0 10px; /* 可以根据需要调整按钮之间的间距 */
}
```
上述代码中,我们使用了 `display: flex;` 属性将按钮容器设置为弹性盒子,并使用 `justify-content: center;` 属性将按钮居中对齐。同时,使用 `margin: 0 10px;` 属性为按钮之间添加了一定的间距,以增强可读性。
请注意,以上代码仅适用于现代浏览器。如果您需要支持旧版浏览器,可能需要使用其他CSS属性或JavaScript来实现此效果。
vue项目中怎么将 一行中 两个按钮 居中
你可以使用 Flex 布局将这两个按钮居中。首先,将这两个按钮放在一个容器内,然后在该容器上应用 `display: flex` 和 `justify-content: center` 样式,即可将两个按钮水平居中。以下是示例 CSS 代码:
```css
.container {
display: flex;
justify-content: center;
}
```
在 HTML 中,你可以这样写:
```html
<div class="container">
<button>按钮1</button>
<button>按钮2</button>
</div>
```
这样,两个按钮就可以水平居中了。