如何使用 CSS 将两个按钮居中显示
可以使用以下 CSS 代码将两个按钮样式居中:
.call-to-action {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.btn {
margin: 10px;
}
.refresh-button {
margin: 10px;
background-color: #f44336;
color: #fff;
font-weight: bold;
border-radius: 5px;
padding: 10px 20px;
border: none;
box-shadow: none;
text-decoration: none;
cursor: pointer;
}
注意:这里使用了 flex 布局,需要在父容器(class 为 'call-to-action')上设置 display 为 flex,并设置 justify-content 和 align-items 属性为 center,使其水平和垂直居中。同时为了让两个按钮在一行上,需要设置 flex-wrap 属性为 wrap。在按钮的样式中,为了让两个按钮间有间隔,使用了 margin 属性。
原文地址: https://www.cveoy.top/t/topic/mmXQ 著作权归作者所有。请勿转载和采集!