响应式设计，使用HTML和CSS将div中的项对齐到页面的中心

Question

[输出图像我得到

]

.featuress{
width:70%;
margin-left:20%;
display: flex;
align-items: center;
padding-bottom:30px;
}
.logo{
min-width: 60px;
margin:10px;
text-align:center;
}
.text{
display: inline-block;
background-color: #ffa600;
}
body, h2, p {
margin:0;
}

.featuress{
width:70%;
margin-left:20%;
display: flex;
align-items: center;
padding-bottom:30px;
}
.logo{
min-width: 60px;
margin:10px;
text-align:center;
}
.text{
display: inline-block;
background-color: #ffa600;
}
body, h2, p {
margin:0;
}

<div class="featuress">
<section id="features">
<div class="premium">
<div class="logo1">
<img class="logo" src="https://cdn-icons-png.flaticon.com/512/70/70535.png" width="40" alt="premium" />
</div>
<div class="text text1">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>  
</div>
<div class="shipping">
<div class="logo2">
<img class="logo" src="https://cdn.pixabay.com/photo/2020/09/14/20/39/vans-5572117__480.png" alt="shipping" width="60" />
</div>
<div class="text text2">
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="quality">
<div class="logo3">
<img class="logo loggo3" src="https://i.pinimg.com/736x/0b/a2/d1/0ba2d192c9b874a4df11af1a90a6d1ad.jpg" alt="quality" width="60"/>
</div>
<div class="text text3">
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</section>
</div>

][1]预期输出样式

<div class="featuress">
<section id="features">
<div class="premium">
<div class="logo1">
<img class="logo" src="https://cdn-icons-png.flaticon.com/512/70/70535.png" width="40" alt="premium" />
</div>
<div class="text text1">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="shipping">
<div class="logo2">
<img class="logo" src="https://cdn.pixabay.com/photo/2020/09/14/20/39/vans-5572117__480.png" alt="shipping" width="60" />
</div>
<div class="text text2">
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="quality">
<div class="logo3">
<img class="logo loggo3" src="https://i.pinimg.com/736x/0b/a2/d1/0ba2d192c9b874a4df11af1a90a6d1ad.jpg" alt="quality" width="60" />
</div>
<div class="text text3">
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</section>
</div>

这是我尝试编写的代码的HTML位，我正在寻找的预期格式是随附的。我只是不太明白它展示的方式。如果你能告诉我如何使用CSS对网站的这一部分进行对齐和样式设置，那就太有帮助了

Answer 1

您可以在特性上使用display:flex和align-items:center。我添加了一些样式来适应你的屏幕。

body, h2, p {
margin:0;
}
.feature {
display:flex;
align-items: center;
padding-bottom:30px;
}
.logo{
min-width: 60px;
margin:10px;
text-align:center;
}

<div class="feature">
<div class="logo">
<img src="https://cdn-icons-png.flaticon.com/512/70/70535.png" width="40"/>
</div>
<div>
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="feature">
<div class="logo">
<img src="https://cdn.pixabay.com/photo/2020/09/14/20/39/vans-5572117__480.png" width="60" />
</div>
<div>
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>    
<div class="feature">
<div class="logo">
<img src="https://i.pinimg.com/736x/0b/a2/d1/0ba2d192c9b874a4df11af1a90a6d1ad.jpg" width="60" />
</div>
<div>
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>

编辑

这里有一个display:flex选择的例子，看看Flexbox (MDN)。

.container{
border:1px solid black;
}
.d-flex{
display:flex;
}
.orange{
background-color:orange;
}
.green{
background-color:green;
}
.pink{
background-color:pink;
}

<div class="d-flex container">
<div class="box-container orange">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
<div class="box-container green">
<div class="box">D</div>
<div class="box">E</div>
<div class="box">F</div>
</div>
<div class="d-flex box-container pink">
<div class="box">G</div>
<div class="box">H</div>
<div class="box">I</div>
</div>
</div>