Html 使用 css 将内容居中并向左对齐

发布于03月15日

抱歉，标题令人困惑.想不出更好的办法了.无论如何，我想要在网格中列出项目.想想网上store 里的产品吧.每件物品的宽度和高度都是固定的，但物品的数量可以改变.最终目标是让所有东西都能响应，这样它在移动和桌面上都会看起来很好.

这是我的代码:

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
            .container {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 1rem;
                background-color: #ffaa00;
                margin-left: auto;
                margin-right: auto;
                width: 90%;
            }
            
            .item {
                width: 15rem;
                height: 15rem;
                background-color: #0088ff;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
    </body>
</html>

一切看起来都像预期的一样，但我希望包装的项目(如果包装的项目数量不等于一整行)靠左对齐，而不是居中对齐.但我仍然希望"整行"中的所有项目都居中对齐.我会加上一些图片来澄清这一点.

This is what I get:

This is what my goal is:

如果我设置"JUSTIFY-CONTENT:LEFT"，所有项目都将靠左对齐，这也不是我想要的……

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style> .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); flex-wrap: wrap; justify-content: center; gap: 1rem; background-color: #ffaa00; margin-left: auto; margin-right: auto; width: 90%; padding: 10px; } .item { height: 15rem; background-color: #0088ff; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> </body> </html>

Html 使用 css 将内容居中并向左对齐

推荐答案

Html相关问答推荐

html中背景色的全单元格R中的Rmarkdown表

使用Scrapy Select 最后一个子文本

需要关于HTML的建议

如何翻转卡片图像的背面

不能以Angular 更改输入的S边框 colored颜色

渐变进度条位置

带有下拉菜单的完整css导航-链接不起作用？

如何显示自定义按钮以将产品添加到WooCommerce购物车？

悬停表格单元格文本时，使元素的字体大小更大，同时保持表格单元格的高度不变

Swift WkMessageHandler 消息不发送

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单？

用由文本制成的边框包围内容

从 Vue 应用程序的容器元素渲染 HTML

表格中每 4 行条纹一次

获取 div 中每个元素的 href 并使用它

如何根据行中的其中一列将行居中？

鼠标悬停时切换 colored颜色的双色链接

如何使用 CSS Flex 设计一个导航栏，其中一组项目左对齐而另一组项目右对齐？

在中心而不是边界处填充 svg 的背景

那里有一个类似于？