两个html和css元素需要水平排列

我遇到了一个似乎找不到解决办法的问题。 我试图让两个标签水平排列。每个人都有一份名单

我想移动红色框，使其与蓝色框对齐。 我还需要一个集中在盒子中间的列表。 我尝试了多种方法来实现框的对齐，其中包括float:left； 它所做的似乎只是在盒子里加上一些填充物

我也尝试过使用绝对值和相对定位，但它不是缩放得很好，就是没有对齐

至于文本的中心，我已经尝试了很多方法。 我尝试使用文本对齐：居中；但这并没有改变这些点。这些词在蓝色的一面也排列得很奇怪。 我还尝试使用左边距：%50；但这并没有使它完全居中，而是使它太偏右了。

我目前的代码如下：

名单{ 背景：蓝色； 宽度：50%； } 清单2{ 背景：红色； 宽度：50%； 左边距：50%； } 配料{ 文本对齐：居中； } 装备{ 文本对齐：居中； } 成分 面包 下面是一些传播的例子 能多益 佩努特黄油 果冻 一些常识 所需设备 搅拌炉或搅拌炉 一把小刀来摊你的摊

---

我肯定会建议考虑使用。太棒了

编辑：如果你要否决我的答案，至少花点时间说说你为什么这么做。据我所知，并形成OP的回答，我正在回答他的问题

* { 颜色：666； 字体系列：无衬线； } 名单{ 边框：2倍纯红； } .页面网格{ 显示：网格； 网格：1fr/1fr 1fr； } .grid-row-1{ 显示：网格； 网格：1fr/1fr； 证明项目：中心； 对齐项目：开始； 背景色：dadada； 边框：2件纯蓝； } .grid-row-2{ 显示：网格； 网格：1fr/1fr； 证明项目：中心； 对齐项目：开始； 背景色：ececec； 边框：2件纯蓝； } 成分 面包 下面是一些传播的例子 能多益 佩努特黄油 果冻 一些常识 所需设备 烤面包机或烤箱 一把小刀来摊你的摊

---

*如何将文本居中放置在框内？谢谢要使要添加的文本居中，请对齐：居中；对于父容器，但是不同长度的点和线看起来很时髦。有没有其他方法可以使文本居中而不扭曲文本的对齐方式？我不能100%确定在文本对齐方面您想要什么，但是如果您希望文本保持左对齐，但要保持块居中，您需要将文本放在另一个红色容器中。红色容器设置为对齐项目：居中。这将使红色容器在其网格列内水平居中。我已经更新了我的代码片段来演示这一点。