以什么方式可以在不同的字段中对齐对象和文本？

Question

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

以下是我所暗示的内容的显示 - DISPLAY

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

#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>

Answer 1

好的，我想我明白你想要做什么，但如果这不是你的想法，请随时告诉我。我不确定为什么line-height: 100px; div上有#contentheadings，所以我将其删除以匹配图片。

＆＃13;

＆＃13;

#contentheadings {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 30px;
	font-family: "Arial";
	color: red;
	text-align: center;
}

#contentheadings div {
	padding-left: 30px;
	padding-right: 30px;
}

＆＃13;

<div id="contentheadings">
	<div>
		<h1>Quality</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tempor dolor. Quisque nec molestie orci. Mauris turpis ipsum, congue quis iaculis sit amet, eleifend non lectus.</p>
	</div>
	<div>
		<h1>Products</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tempor dolor. Quisque nec molestie orci. Mauris turpis ipsum, congue quis iaculis sit amet, eleifend non lectus.</p>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;