想做两个按钮并列排列且居中怎么写
时间: 2023-07-31 09:07:57 浏览: 603
你可以使用以下 CSS 代码:
```
.container {
display: flex;
justify-content: center;
}
.button {
margin: 0 10px; /* 调整按钮之间的间距 */
}
```
然后在 HTML 中嵌套两个按钮:
```
<div class="container">
<button class="button">按钮1</button>
<button class="button">按钮2</button>
</div>
```
这样就可以实现两个按钮并列排列且居中的效果。
相关问题
css如何让两个div并列且图文居中
可以使用Flex布局来实现两个div并列且图文居中的效果。具体可以按照以下步骤进行:
1. 父元素设置为display: flex,使其成为一个Flex容器。
2. 设置justify-content属性为center,这样子元素就可以水平居中。
3. 设置align-items属性为center,这样子元素就可以垂直居中。
4. 设置子元素的flex属性为1,这样子元素将会平分剩余空间,实现并列效果。
5. 对于子元素中的文字和图片,可以设置text-align: center和margin: auto来进行水平和垂直居中。
下面是示例代码:
```html
<div class="container">
<div class="item">
<img src="图片路径" alt="图片描述">
<p>文本内容</p>
</div>
<div class="item">
<img src="图片路径" alt="图片描述">
<p>文本内容</p>
</div>
</div>
```
```css
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
flex: 1;
text-align: center;
}
.item img {
margin: auto;
}
.item p {
margin: auto;
}
```
css如何让两个div并列且文字居中
可以使用CSS的flex布局来实现两个div并列,并使用text-align属性来让文本居中。
HTML代码:
```
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
```
CSS代码:
```
.container {
display: flex;
}
.box {
flex: 1;
text-align: center;
}
```
在上面的代码中,我们将父元素设置为flex布局,然后将子元素的flex属性设置为1,这样两个子元素就会并列显示在一行中。同时,我们将子元素的文本居中显示。