我有一个简单的布局，我在网格内使用网格和flexbox将图标和文本(标题和段落(并排放置。
正常航向对准
然而，当我最小化视口以在响应视图(平板电脑或移动设备(中查看布局时，这些标题会被向上推，它们不再相互对齐。
我想知道是否有一种方法可以使标题在平板电脑视图中始终并排排列，而不会被向上推。此外，如果没有Javascript也能实现，那就太好了，因为我正在学习html&css。
还有一个额外的问题——我网站上的图标是否也有可能缩小(窗口越小图标就越小(。
来自新手的感谢
标题彼此不一致
/*Services*/
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-rows: 300px;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin: 7rem 10rem 5rem 10rem;
row-gap: 5rem;
}
.headingservice {
font-family: "GTAmericaRegular";
font-size: 1.5rem;
font-weight: 900;
line-height: 28px;
padding: 20px;
}
.paragraphservice {
font-family: "GTAmericaRegular";
font-size: 1.5rem;
padding-bottom: 25px;
}
.text a {
font-size: 1.2rem;
color: #4C5FD5;
text-decoration: none;
}
/*Icons*/
.image img {
width: 50px;
width: 90px;
height: 90px;
margin: 0 30px 30px 30px;
}
.services {
display: flex;
justify-items: center;
align-items: center;
}<section class="main">
<div class="services">
<div class="image"><img src="/images/repair-equipment.png"></div>
<div class="text">
<h1 class="headingservice">Using Abstract</h1>
<p class="paragraphservice">Abstract lets you manage, version, and document your designs in one place.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="services">
<div class="image"><img src="/images/cashmachine.png"></div>
<div class="text">
<h1 class="headingservice">Manage your account</h1>
<p class="paragraphservice">Configure your account settings, such as your email, profile details, and password.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="services">
<div class="image"><img src="/images/sketchbook.png"></div>
<div class="text">
<h1 class="headingservice">Manage organizations, teams and projects</h1>
<p class="paragraphservice">Use Abstract organizations, teams, and projects to organize your people and your work.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="services">
<div class="image"><img src="/images/braille.png"></div>
<div class="text">
<h1 class="headingservice">Manage billing</h1>
<p class="paragraphservice">Change subscriptions and payment details.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="services">
<div class="image"><img src="/images/graduation.png"></div>
<div class="text">
<h1 class="headingservice">Authenticate to Abstract</h1>
<p class="paragraphservice">Set up and configure SSO, SCIM, and Just-in-Time provisioning.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="services">
<div class="image"><img src="/images/open.png"></div>
<div class="text">
<h1 class="headingservice">Abstract support</h1>
<p class="paragraphservice">Get in touch with a human</p>
<a href="#">Learn more</a>
</div>
</div>
</section>标题上升的事实是合乎逻辑的，因为。您已经设置了垂直中心对齐，并且块具有不同的高度。试着这样做，但最好看看它应该是什么样子，以便提供更有效的建议。
/*Services*/
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-rows: 300px;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin: 7rem 10rem 5rem 10rem;
row-gap: 5rem;
}
.headingservice {
font-family: "GTAmericaRegular";
font-size: 1.5rem;
font-weight: 900;
line-height: 28px;
padding: 20px;
}
.paragraphservice {
font-family: "GTAmericaRegular";
font-size: 1.5rem;
padding-bottom: 25px;
}
.text a {
font-size: 1.2rem;
color: #4C5FD5;
text-decoration: none;
}
/*Icons*/
.image img {
width: 50px;
width: 90px;
height: 90px;
margin: 0 30px 30px 30px;
}
.services {
display: flex;
justify-items: center;
align-items: center;
}
.main,
.services {
align-items: flex-start;
}
.image img {
margin: 30px 30px 0 30px;
}<section class="main">
<div class="services">
<div class="image"><img src="/images/repair-equipment.png"></div>
<div class="text">
<h1 class="headingservice">Using Abstract</h1>
<p class="paragraphservice">Abstract lets you manage, version, and document your designs in one place.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="services">
<div class="image"><img src="/images/cashmachine.png"></div>
<div class="text">
<h1 class="headingservice">Manage your account</h1>
<p class="paragraphservice">Configure your account settings, such as your email, profile details, and password.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="services">
<div class="image"><img src="/images/sketchbook.png"></div>
<div class="text">
<h1 class="headingservice">Manage organizations, teams and projects</h1>
<p class="paragraphservice">Use Abstract organizations, teams, and projects to organize your people and your work.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="services">
<div class="image"><img src="/images/braille.png"></div>
<div class="text">
<h1 class="headingservice">Manage billing</h1>
<p class="paragraphservice">Change subscriptions and payment details.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="services">
<div class="image"><img src="/images/graduation.png"></div>
<div class="text">
<h1 class="headingservice">Authenticate to Abstract</h1>
<p class="paragraphservice">Set up and configure SSO, SCIM, and Just-in-Time provisioning.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="services">
<div class="image"><img src="/images/open.png"></div>
<div class="text">
<h1 class="headingservice">Abstract support</h1>
<p class="paragraphservice">Get in touch with a human</p>
<a href="#">Learn more</a>
</div>
</div>
</section>