Html 以何种方式可以对齐不同字段中的对象和文本？

以何种方式可以在不同的级别和字段中对齐对象和文本？特别是，我尝试将文本调整为网站的四分之一部分

这里展示了我的意思-

重新表述问题-在代码中，我需要在标题下方放置两个单独的文本块-产品和质量

#contentheadings {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 30px;
        font-family: "Arial";
        color: red;
        line-height: 100px;
    }
<div id="contentheadings">
        <div><h1>Quality</h1></div>
        <div><h1>Products</h1></div>
</div>

---

好的，我想我理解你想要表达的意思，但是如果你没有想到这一点，请随时告诉我。我不知道你为什么有线高：100px；在ContentHeaders div上，所以我删除了它以匹配图像

内容标题{ 显示器：flex； 弯曲方向：行； 证明内容：周围的空间； 填充：30px； 字体系列：Arial； 颜色：红色； 文本对齐：居中； } 内容标题部{ 左侧填充：30px； 右侧填充：30px； } 质量 Lorem ipsum dolor sit amet，是一位杰出的献身者。我是临时工。奎斯克·内克·莫莱斯蒂·奥奇。毛里斯·图皮斯·伊普森，康格·奎斯·伊库利斯·希特，埃利弗德·非莱克图斯

产品 Lorem ipsum dolor sit amet，是一位杰出的献身者。我是临时工。奎斯克·内克·莫莱斯蒂·奥奇。毛里斯·图皮斯·伊普森，康格·奎斯·伊库利斯·希特，埃利弗德·非莱克图斯

---

最好让一些代码显示您想要实现的目标，而不仅仅是一个屏幕截图。另外，这个问题的措辞让人很难理解你想要达到的目的。你好，谢谢你的回答。请注意，我已经编辑了问题并添加了代码片段。介意复习一下吗？