时间戳

首页 > 解决方案 > 如何在 CSS 中响应式地在网站上居中卡片？

html - 如何在 CSS 中响应式地在网站上居中卡片？

问题描述

所以我正在建立我的编码日志网站（在学习如何编码的第 15 天，所以现在只做 HTML 和 CSS）。

我把每一天都编成一张卡片，上面有简短的描述和截图。我希望这些卡片从左上角堆叠（就像我使用 float:left 时所做的那样），但也希望它们始终位于页面的中心，无论显示的宽度如何。我曾尝试使用 display: inline-block，但随后卡片从 center 填充，这是我不想要的。

编辑：按照你们的建议，我设法通过使用弹性盒来做到这一点。这更接近我想要的！我想要的是底部卡片与最左边的顶部卡片对齐。我将如何实现这一目标？现在我的 CSS 看起来像这样：

.main {
    display: flex;
    flex-wrap: wrap;
    max-width: 95%;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}

.entry {
    background-color: white;
    width: 360px;
    height: auto;
    float: left;
    padding: 2%;
    margin-top: 2%;
    margin-left: 1%;
    margin-right: 1%;
    border: 10px black solid;
}

.main 是主容器，.entry 是一张卡片

标签： htmlcss

解决方案

你应该尝试使用 flexbox 可能会做你想要的。试试这个 display: flex; 证明内容：中心；检查此站点https://alligator.io/css/centering-using-flexbox/或搜索一些快速 flexbox 指南，我认为您可以使用 flexbox 实现您的愿望，如果它不起作用，请尝试使用一些网格。

推荐阅读