<div style="display: flex; margin-left: 0;text-align:center;vertical-align:middle;"> <input type ='submit' placeholder ="计算" value="计算" style="display: flex;width:120px;height: 44px;border-style:solid;border-color:#C23531;background-color:#C23531;font-size: 17px;letter-spacing:3px;"> </div>这样设置了,但还是无法居中,而且边框效果也不对
时间: 2024-01-26 12:02:33 浏览: 155
您可以尝试修改CSS样式代码,使其实现居中效果和边框效果,如下所示:
HTML代码:
```html
<div style="display: flex; justify-content: center; align-items: center; margin-left: 0;">
<input type="submit" placeholder="计算" value="计算" style="width: 120px; height: 44px; border: 1px solid #C23531; background-color: #C23531; font-size: 17px; letter-spacing: 3px; color: #fff; text-align: center;">
</div>
```
CSS代码:
```css
div {
display: flex;
justify-content: center;
align-items: center;
margin-left: 0;
}
input[type="submit"] {
width: 120px;
height: 44px;
border: 1px solid #C23531;
background-color: #C23531;
font-size: 17px;
letter-spacing: 3px;
color: #fff;
text-align: center;
}
```
解释:
- `justify-content: center;`和`align-items: center;`可以使得父元素和子元素都在水平和垂直方向上居中。
- `border: 1px solid #C23531;`可以设置边框的颜色和宽度。
- `color: #fff;`可以设置文字的颜色为白色。
这样设置后,应该能够实现您想要的居中和边框效果了。
阅读全文
相关推荐















