如何实现网页内联按钮居中并保持合理间距

你的核心问题是容器布局属性设置错误，且容器固定宽度远小于按钮总宽度，导致按钮挤在一起。以下是修改后的代码及说明：

修改后的CSS代码 #

.buttoncontainer {
    box-sizing: border-box;
    /* 去掉过小的固定宽度，改用自适应+最大宽度限制 */
    width: 100%;
    max-width: 1200px;
    height: 200px;
    margin: 0 auto;
    /* 切换为flex布局实现横向排列、居中与间距 */
    display: flex;
    justify-content: space-around; /* 按钮间均匀分配空间 */
    align-items: center; /* 按钮垂直居中 */
    gap: 20px; /* 直接设置按钮间的固定间距 */
}

.inlinebutton {
    height: 200px;
    width: 350px;
    color: #fff;
    background-image: url('./profile.jpg');
    background-size: cover;
    border: none; /* 修正原错误的border值，避免按钮样式异常 */
    border-radius: 5%;
    cursor: pointer;
    /* 移除无效的padding:auto，padding不支持auto属性值 */
}

关键修改点说明 #

• 将.buttoncontainer的display: block改为display: flex，flex布局是实现这种横向排列需求的最优方案
• 移除容器的固定小宽度，改用width:100%加max-width限制，避免按钮超出屏幕范围
• 使用justify-content: space-around让按钮在容器内均匀分布，若需要首尾按钮贴容器边缘，可替换为space-between
• 新增gap:20px直接定义按钮间的间距，比使用margin更简洁可控
• 修正.inlinebutton的border:50px错误设置，移除无效的padding:auto属性

内容的提问来源于stack exchange，提问作者crypticazure