我无法将我的 div 居中并让他做出响应

Question

我正在用 html 和 css 制作学校项目，按钮上方的所有上部部分均居中且响应式，但按钮未居中（我不得不将宽度更改为 60%）并且它们不响应，任何帮助将不胜感激。

这是代码：

.Sports-type{
    padding: 10px;
    width: 60%;
    margin: auto;
    text-align: center;
    display: grid;
    grid-template-columns: auto auto auto;
}

我尝试使用不同的显示命令并调整宽度、填充和边距，但没有结果。

Answer 1

您可以将

display: grid

替换为

display: flex

以使按钮居中并使其响应。

.Sports-type {
    padding: 10px;
    width: 60%;
    margin: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Adjust as needed */
}

.Sports-type button {
    width: calc(33.33% - 20px); /* Adjust the width and spacing as needed */
    margin: 10px; /* Adjust the margin as needed */
}